父母与最小高度的孩子：100％不继承高度

Question

我发现一种方法来使div容器至少占据页面的整个高度，通过设置min-height: 100%;。但是，当我添加嵌套div并设置height: 100%;时，它不会伸展到容器的高度。有没有办法解决它？

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
#containment { 
 
    min-height: 100%; 
 
    background: pink; 
 
} 
 

 
#containment-shadow-left { 
 
    height: 100%; 
 
    background: aqua; 
 
}

<div id="containment"> 
 
    <div id="containment-shadow-left"> 
 
    Hello World! 
 
    </div> 
 
</div>

Answer 1

这是一个WebKit的报道（铬/ Safari浏览器）的错误，父母与最小高度的子女不能继承height属性：https://bugs.webkit.org/show_bug.cgi?id=26559

显然Firefox是受到太大（不能在时刻IE测试）

可能的解决方法：

• 加载位置：相对于#containment
• 添加位置是：绝对到＃遏制阴影左

当内部元件具有绝对定位的错误不显示。

见4月10日http://jsfiddle.net/xrebB/

编辑2014

由于我目前工作的一个项目，我真的需要父容器与min-height，和子元素继承的高度容器，我做了更多的研究。

第一：我不太确定当前的浏览器行为是否真的是一个错误。 CSS2.1规格说：

百分比是相对于 生成的框的包含块的高度计算的。如果包含 块的高度没有明确指定（即，它取决于内容 高度），并且该元素没有被绝对定位，则值 计算为'auto'。

如果我把我的容器上的最小高度，我不明确指定它的高度 - 所以我的元素应该得到一个auto高度。这正是Webkit和所有其他浏览器所做的。

其次，我找到了解决方法：

如果我把我的容器元素display:table与height:inherit它的行为完全一样，如果我给它100的min-height％的方式相同。而且 - 更重要的是 - 如果我将子元素设置为display: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> 

见http://jsfiddle.net/xrebB/54/。

Answer 2

，让Google：

这jQuery的解决办法，使#containment自动获得一个高度（通过高度：自动），然后得到分配为像素值的实际高度。

<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> 

Answer 3

将height: 1px添加到父容器。适用于Chrome，FF，Safari。

Answer 4

尝试过我们的！ chrome明白当我将显示值设置为内联块时，我希望子元素的高度为100％。 btw设置浮动将导致它。

display:inline-block 

更新

这是行不通的。解决方案是获取父节点偏移量高度，并在javascript页面处使用它。

<script> 
    SomedivElement = document.getElementById('mydiv'); 
    SomedivElement.style.height = String(nvleft.parentNode.offsetHeight) + 'px';  
</script> 

Answer 5

Kushagra古尔的解决方案确实（至少在Chrome和IE）的工作和不必使用display: table;和display: table-cell;解决了原来的问题。请参阅plunker：http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU

在外部div上设置min-height: 100%; height: 1px;会导致其实际高度至少为100％，如果需要。它也允许内部div正确地继承高度。

Answer 6

我不相信这是一个浏览器的错误。所有的行为都是一样的 - 也就是说，一旦你停止指定明确的高度，最小高度基本上是“最后一步”。

这似乎是在CSS 2.1规范究竟是如何建议： http://www.w3.org/TR/CSS2/visudet.html#the-height-property

的比例相对于所生成的框的包含块的高度计算。如果未明确指定包含块的高度（即，它取决于内容高度），并且该元素没有被绝对定位，则该值计算为'auto'。

因此，作为min-height父没有一个明确的height属性集，则默认为自动。

有些方法可能通过使用display: table-cell或更新的样式（如flexbox）（如果这可能适用于目标受众的浏览器）。在某些情况下，您也可以通过在绝对定位的内部元素上使用top和bottom属性来颠覆这一点，该属性在不指定的情况下为您提供100％的高度。

Answer 7

另一个JS解决方案，很简单，可以用来避免非简单的CSS或额外的标记/哈克解决方案。

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'); 
} 

角指令：

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> 

Answer 8

以为我会分享这个，因为我没有看到这个地方，这是我用来解决我的问题lution。

SOLUTION：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>

这样，孩子现在作为高度的最小高度的100％。

我希望有些人觉得这有用:)

Answer 9

除了现有的答案，也有视单位vh使用。下面的简单片段。当然，它也可以与calc()一起使用，例如， min-height: calc(100vh - 200px);当页眉和页脚有高度在一起时200px。

body { 
 
    margin: 0; 
 
} 
 

 
.child { 
 
    min-height: 100vh; 
 
    background: pink; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>