父节点内的子节点具有最小高度:100%不继承高度

我找到了一种方法,使一个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>

148164 次浏览

这是一个报告的webkit (chrome/safari)错误,父母具有min-height的孩子不能继承height属性:https://bugs.webkit.org/show_bug.cgi?id=26559

显然Firefox也受到了影响(目前无法在IE中测试)

可能的解决方法:

  • 添加位置:相对于#containment
  • 添加位置:绝对到# include -shadow-left

当内部元素具有绝对定位时,该错误不会显示。

看到http://jsfiddle.net/xrebB/

编辑于2014年4月10日

因为我目前正在做一个项目,我真的需要带有min-height的父容器,并且子元素继承容器的高度,所以我做了更多的研究。

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

的高度计算的百分比 生成框的包含块。如果包含高度 Block没有显式地指定(也就是说,它取决于内容 高度),并且该元素不是绝对定位的,值

如果我在容器上放置一个min-height,我没有显式地指定它的高度——所以我的元素应该得到一个auto高度。这正是Webkit和所有其他浏览器所做的。

第二,我发现的变通方法:

如果我用height:inherit将容器元素设置为display:table,它的作用与我将它的min-height设为100%完全相同。而且——更重要的是——如果我将子元素设置为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/

员工:

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

height: 1px添加到父容器。工作在Chrome, FF, Safari。

在尝试了我们的之后!chrome理解,当我设置显示值为inline block时,我希望子元素的高度为100%。顺便说一句,设置浮动会导致它。

display:inline-block

更新

这行不通。解决方案是获得parentnode offsetheight,并使用它在页面的和javascript。

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

Kushagra Gour的解决方案确实有效(至少在Chrome和IE中),并且无需使用display: table;display: table-cell;就解决了原始问题。参见plunker: http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU

在外部div上设置min-height: 100%; height: 1px;会导致它的实际高度至少为100%,如要求的那样。它还允许内部div正确继承高度。

我不相信这是浏览器的bug。所有的行为都是一样的——也就是说,一旦停止指定显式高度,min-height基本上就是“最后一步”了。

这似乎正是CSS 2.1规范所建议的: http://www.w3.org/TR/CSS2/visudet.html#the-height-property < / p >

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

因此,由于min-height父类没有显式的height属性集,它默认为auto。

有一些方法可以通过使用display: table-cell,或更新的样式,如flexbox,如果这对你的目标受众的浏览器是可能的。在某些情况下,你也可以通过在绝对定位的内部元素上使用topbottom属性来颠覆它,它会给你100%的高度而不指定。

另一个简单的JS解决方案,可以用来避免不简单的css或额外的标记/ hack解决方案。

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>

我想我会分享这个,因为我在任何地方都没有看到这个,这是我用来修复我的解决方案。

解决方案: 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%。

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

除了现有的答案,还有viewport单元vh可以使用。下面是一个简单的代码片段。当然,它也可以与calc()一起使用,例如,当页眉和页脚同时具有200px高度时,则使用min-height: calc(100vh - 200px);

body {
margin: 0;
}


.child {
min-height: 100vh;
background: pink;
}
<div class="parent">
<div class="child"></div>
</div>

这是在@jackocnr的评论中添加的,但我错过了。对于现代浏览器,我认为这是最好的方法。

如果容器太小,它会让内部元素填充整个容器,但如果容器太大,它会扩展容器的高度。

#containment {
min-height: 100%;
display: flex;
flex-direction: column;
}


#containment-shadow-left {
flex: 1;
}

虽然这里建议使用display: flex;,但现在考虑使用display: grid;,因为它是广泛的支持。默认情况下,网格的唯一子节点将完全填充其父节点。

html, body {
height: 100%;
margin: 0;
padding: 0; /* Don't forget Safari */
}


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


#containment-shadow-left {
background: aqua;
}

只是为了保持这个主题的完整,我发现了一个解决方案没有探索在这里使用固定位置。

没有溢出

html, body, .wrapper, .parent, .child {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
height: 100%;
}


.child {
overflow: auto;
background: gray;
}


.height-50 {
height: 50%;
width: 5em;
margin: 10px auto;
background: cyan;
}
<div class="wrapper">
<div class="parent">
<div class="child">
      

<div class="height-50"></div>
      

</div>
</div>
</div>

与溢出

html, body, .wrapper, .parent, .child {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
height: 100%;
}


.child {
overflow: auto;
background: gray;
}


.height-150 {
height: 150%;
width: 5em;
margin: 10px auto;
background: cyan;
}
<div class="wrapper">
<div class="parent">
<div class="child">
      

<div class="height-150"></div>
      

</div>
</div>
</div>

这对我来说是有效的,因为基于百分比的身高和父母仍然根据孩子的身高增长。 可以在Firefox, Chrome和Safari中正常工作

.parent {
position: relative;
min-height: 100%;
}


.child {
min-height: 100vh;
}
<div class="parent">
<div class="child"></div>
</div>

现在实现这个的最好方法是使用display: flex;。然而,当你试图支持IE11时,你可能会遇到一个问题。根据使用flexbox的https://caniuse.com:

当使用min-height时,IE 11不能正确地垂直对齐项目

Internet Explorer兼容解决方案

解决方案是在父对象上使用display: table;,在子对象上使用display: table-row;,并用height: 100%;代替min-height: 100%;

这里列出的大多数解决方案使用display: tabletable-row和/或table-cell,但它们不会复制与min-height: 100%;相同的行为,即:

  • 继承父类的计算高度(而不是继承其height属性);
  • 允许父节点的高度超过其min-height;

在使用此解决方案时,行为是相同的,并且不需要属性min-height,这允许绕过错误。

解释

它工作的原因是,与大多数元素不同,使用display: tabletable-row的元素将始终与它们的内容一样高。这使得它们的height属性的行为类似于min-height

实际解决方案

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


#containment {
display: table;
height: 100%;
background: pink;
width: 100%;
}


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


#content {
padding: 15px;
}


#demo {
display: none;
background-color: red;
height: 200px;
}


#demo-checkbox:checked ~ #demo {
display: block;
}
<div id="containment">
<div id="containment-shadow-left">
<div id="content">
<input id="demo-checkbox" type="checkbox">
<label for="demo-checkbox">Click here for overflow demo</label>
<div id="demo">This is taller than #containment</div>
</div>
</div>
</div>

这对我来说通常是有效的:

.parent {
min-height: 100px;
background-color: green;
display: flex;
}
.child {
height: inherit;
width: 100%;
background-color: red;
}
<!DOCTYPE html>
<html>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>

添加这个到父组件为我修复了它:

display: flex;
flex-direction: column;

2022年7月6日

.parent{
display: flex; /* very important rule */
flex-direction: column; /* very important rule */


min-height: 100%
}


.child{
height: 100%;


flex-grow: 1; /* very important rule, simulate flex: 1; */
}
<div class="parent">
<div class="child">
</div>
</div>

已经有一段时间了,但是,如果其他人还在挣扎,我找到了我的变通办法。 我需要父有一个最小的高度,和孩子(这将包含几个图像/文件预览)必须占据整个父,所以..

我简单地定义了一个最小的高度给孩子,让父母没有定义高度,所以它可以随着孩子的内容增长。

CSS

.parent{
border: 1px solid black;
border-radius: 5px;
}
.children{
width: 100%;
min-height: 100px;
}

HTML:

<div class="parent">
<div class="children">
some content inside
</div>
</div>