大佬教程收集整理的这篇文章主要介绍了css – 父级内的子级,最小高度100％不继承高度，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
html,body { height: 100%; } body { margin: 0; padding: 0; } #containment { width: 60%; min-width: 780; min-height: 100%; margin: 0 auto 0 auto; padding: 0; BACkground: #ff2; } #containment-shadow-left { BACkground: url(images/shadow-left.png) left repeat-y; padding-left: 16px; height: 100%; }
page.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>X</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <link rel="stylesheet" href="style.css"/> </head> <body> <div id="containment"> <div id="containment-shadow-left"> Hello World! </div> </div> </body> </html>
我发现一种方法，通过将min-height属性设置为100％，使div容器至少占据页面的整个高度。但是，当我添加一个嵌套的div并将其高度设置为100％时，它不会伸展到容器的高度。有办法解决它吗？
显然Firefox也受到影响(目前无法测试在IE)
可能的解决方法：
>添加位置：相对于#containment
> add position：absolute to#containment-shadow-left
当内部元素具有绝对定位时，错误不会显示。
于2014年4月10日修改
因为我目前正在一个项目，我真正需要父容器与min-height，和子元素继承容器的高度，我做了一些更多的研究。
首先：我不太确定现在的浏览器行为是否真的是一个错误。 CSS2.1规范说：
如果我把一个最小高度放在我的容器，我没有明确指定它的高度 – 所以我的元素应该得到一个自动高度。这正是Webkit和所有其他浏览器。
二，解决方法我发现：
如果我将我的容器元素设置为display：table with height：inherit，它的行为方式完全一样，如果我给它一个最小高度为100％。更重要的是 – 如果我设置子元素显示：table-cell，它将完美地继承容器元素的高度 – 无论是100％还是更多。
完整CSS：
html,body { height: 100%; margin: 0; } #container { BACkground: green; display: table; height: inherit; width: 100%; } #content { BACkground: red; display: table-cell; }
标记：
<div id="container">
<div id="content">
<p>content</p>
</div>
</div>
以上是大佬教程为你收集整理的css – 父级内的子级,最小高度100％不继承高度全部内容，希望文章能够帮你解决css – 父级内的子级,最小高度100％不继承高度所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。