在最小高度的父母的孩子100％不inheritance身高
style.css文件
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>
我find了一种方法来使div容器至less占据页面的整个高度，方法是将min-height属性设置为100％。 但是，当我添加一个嵌套div并将其高度设置为100％时，它不会伸展到容器的高度。 有没有办法解决它？
这是一个报告的webkit（铬/狩猎）错误，父母的最小高度的孩子不能inheritance高度属性： https ： //bugs.webkit.org/show_bug.cgi？id = 26559
显然Firefox也受到影响（目前无法在IE中testing）
可能的解决方法：
- 添加位置：相对于#containment
- 将位置：绝对添加到＃containment-shadow-left
当内部元素具有绝对定位时，错误不会显示。
于2014年4月10日编辑
由于我目前正在开发一个项目，因为我真的需要使用min-height父容器，并且需要inheritance容器高度的子元素，所以我做了更多的研究。
首先：我不太确定当前的浏览器行为是否真的是一个错误。 CSS2.1规格说：
百分比是根据生成的包含盒子的高度来计算的。 如果包含块的高度没有明确指定（即取决于内容高度），并且该元素没有被绝对定位，则该值计算为“auto”。
如果我在容器上放一个最小高度，我没有明确指定它的高度 – 所以我的元素应该得到一个auto高度。 这正是Webkit和所有其他浏览器所做的。
其次，我发现的解决方法：
如果我将我的容器元素设置为display:table带有height:inherit display:table height:inherit它的行为完全相同，如果我给它一个100％的min-height 。 而且 – 更重要的是，如果我将子元素设置为display:table-cell ，它将完全inheritance容器元素的高度 – 无论是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>
将height: 1px添加到父容器。 适用于Chrome，FF，Safari。
我以为我会分享这一点，因为我没有看到这个地方，这是我用来解决我的问题。
解决scheme ： min-height: inherit;
我有一个特定的高度的父母，我需要一个孩子也是那个高度。
.parent { min-height: 300px; background-color: rgba(255,255,0,0.5); //yellow } .child { min-height: inherit; background-color: rgba(0,255,0,0.5); //blue } p { padding: 20px; color: red; font-family: sans-serif; font-weight: bold; text-align: center; }
<div class="parent"> <div class="child"> <p>Yellow + Blue = Green :)</p> </div> </div>
Kushagra Gour的解决scheme确实可行（至less在Chrome和IE中），并且无需使用display: table;解决了原始问题display: table; 并display: table-cell; 。 见plunker： http ://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU
设置min-height: 100%; height: 1px; min-height: 100%; height: 1px; 在外部div导致其实际高度至less100％，根据要求。 它也允许内部div正确地inheritance高度。
我不相信这是浏览器的一个错误。 所有的行为都是一样的 – 也就是说，一旦你停止指定明确的高度，最小高度基本上是“最后一步”。
看起来好像是CSS 2.1规范的build议： http : //www.w3.org/TR/CSS2/visudet.html#the-height-property
百分比是根据生成的包含盒子的高度来计算的。 如果包含块的高度没有明确指定（即，取决于内容高度），并且该元素没有被绝对定位，则该值计算为“auto”。
因此，由于min-height父级没有明确的height属性集，所以默认为auto。
有一些方法可能通过使用display: table-cell或flexbox等更新的样式（如果目标受众的浏览器可能）。 你也可以在某些情况下通过在绝对定位的内部元素上使用top和bottom属性来颠覆这一点，它给你100％的高度而没有指定。
对于googlers：
这jQuery的解决方法使#containment自动获取高度（by，height：auto），然后获取实际高度分配为像素值。
<script type="text/javascript"> <!-- $(function () { // workaround for webkit-bug http://stackoverflow.com/a/8468131/348841 var rz = function () { $('#containment') .css('height', 'auto') .css('height', $('#containment').height() + 'px'); }; $(window).resize(function () { rz(); }); rz(); }) --> </script>
另一个JS解决scheme，这很容易，可以用来避免一个非简单的CSS或额外的标记/哈克解决scheme。
function minHeight(elm, percent) { var windowHeight = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight; var height = windowHeight * percent / 100; elm.style.minHeight = height + 'px'; }
W / jQuery：
function minHeight($elm, percent) { var windowHeight = $(window).height(); var height = windowHeight * percent / 100; $elm.css('min-height', height + 'px'); }
Angular指令：
myModule.directive('minHeight', ['$window', function($window) { return { restrict: 'A', link: function(scope, elm, attrs) { var windowHeight = isNaN($window.innerHeight) ? $window.clientHeight : $window.innerHeight; var height = windowHeight * attrs.minHeight / 100; elm.css('min-height', height + 'px'); } }; }]);
要这样使用：
<div> <!-- height auto here --> <div min-height="100"> <!-- This guy is at least 100% of window height but grows if needed --> </div> </div>
在为我们的尝试之后！ 铬知道，我想要的子元素是100％的高度，当我设置显示值内联块。 顺便说一句，设置浮动将导致它。
display:inline-block
更新
这是行不通的。 解决的办法是得到parentnode偏移高度，并使用它的JavaScript和页面。
<script> SomedivElement = document.getElementById('mydiv'); SomedivElement.style.height = String(nvleft.parentNode.offsetHeight) + 'px'; </script>
