具有最小高度的父元素中的子元素:100%不继承高度

我找到了一种方法，通过设置min-height: 100%;，使div容器至少占据页面的全部高度。但是，当我添加一个嵌套的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>

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

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

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

我希望有些人发现这有用:)

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

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

可能的解决方案:

添加位置:相对#containment
给# container -shadow-left添加position:absolute

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

见http://jsfiddle.net/xrebB/

2014年4月10日编辑

因为我目前正在做一个项目，我真的需要父容器与min-height，和继承容器的高度的子元素，我做了一些更多的研究。

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

百分比计算相对于的高度生成盒子的包含块。如果包含的高度Block没有明确指定(即，它取决于内容)高度)，并且此元素不是绝对定位的值计算到'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/.

这是@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;
}

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

在外部div上设置min-height: 100%; height: 1px;会使其实际高度至少为100%，根据需要。它还允许内部div正确地继承高度。

除了现有的答案，还有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>

我通常这样做:

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

我不认为这是浏览器的bug。它们的行为都是一样的——也就是说，一旦你停止指定显式高度，最小高度基本上是"最后一步"。

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

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

因此，由于min-height父节点没有显式设置height属性，它默认为auto。

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

谷歌用户:

这个jquery解决方案使#containment自动获得高度(通过，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解决方案，这很容易，可以用来避免非简单的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';
}

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>

目前实现这一目标的最佳方法是使用display: flex;。但是，当您尝试支持IE11时可能会遇到问题。根据https://caniuse.com使用flexbox:

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

Internet Explorer兼容解决方案

解决方案是在父节点上使用display: table;，在子节点上使用display: table-row;，并用height: 100%;代替min-height: 100%;。

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

继承父元素的计算高度(而不是继承它的height属性);
允许父元素的高度超过min-height;

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

解释

它起作用的原因是，与大多数元素不同，使用display: table和table-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>

将此添加到父组件中:

display: flex;
flex-direction: column;

只是为了保持这个主题完整，我找到了一个解决方案，这里没有使用固定位置。

没有溢出

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>

解决方案2022年7月06

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

添加align-self: normal到子条目。

为我们的尝试!当我将显示值设置为inline block时，chrome理解我希望子元素的高度为100%。顺便说一句，设置浮动会导致这个问题。

display:inline-block

更新

这是不工作。解决方案是获得父节点offsetheight，并使用javascript在页面的底部使用它。

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

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

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

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

Internet Explorer兼容解决方案

溶液作用

没有溢出

相关内容

最新更新

热门标签：