最小高度的父母内部的孩子:100%没有继承身高

时间:2011-12-11 22:36:08

标签: css html

我找到了一种方法,通过设置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>

16 个答案:

答案 0 :(得分:148)

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

答案 1 :(得分:122)

这是一个报告的webkit(chrome / safari)错误,具有最小高度的父级的子级无法继承height属性:https://bugs.webkit.org/show_bug.cgi?id=26559

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

可能的解决方法:

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

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

请参阅http://jsfiddle.net/xrebB/

2014年4月10日编辑

由于我目前正在开发一个项目,我真的需要父容器min-height,子元素继承容器的高度,我做了更多的研究。< / p>

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

  

百分比是根据高度来计算的   生成的框包含块。如果含有的高度   未明确指定块(即,它取决于内容   高度),这个元素并不是绝对定位的值   计算'自动'。

如果我在容器上放置一个最小高度,我不是明确指定它的高度 - 所以我的元素应该得到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/

答案 2 :(得分:73)

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

解决方案min-height: inherit;

我有一个指定最小高度的父母,我需要一个孩子才能达到那个高度。

&#13;
&#13;
.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;
}
&#13;
<div class="parent">
  <div class="child">
    <p>Yellow + Blue = Green :)</p>
  </div>
</div>
&#13;
&#13;
&#13;

这样,孩子现在可以作为最小高度100%的高度。

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

答案 3 :(得分:8)

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

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

答案 4 :(得分:6)

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

如果内部元素太小,它将使整个内部元素充满整个容器;如果太大,则内部元素将扩展其高度。

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

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

答案 5 :(得分:3)

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

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

  

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

因此,由于min-height父级没有明确的height属性集,因此默认为auto。

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

答案 6 :(得分:3)

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

&#13;
&#13;
body {
  margin: 0;
}

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

答案 7 :(得分:2)

对于googlers:

这个jquery-workaround使#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>

答案 8 :(得分:2)

这通常对我有用:


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

答案 9 :(得分:1)

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

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>

答案 10 :(得分:1)

当今实现这一目标的最佳方法是使用display: flex;。但是,尝试支持IE11时可能会遇到问题。根据{{​​3}}使用flexbox:

  

使用最小高度时,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>

答案 11 :(得分:1)

将此添加到父组件为我修复它:

display: flex;
flex-direction: column;

答案 12 :(得分:0)

尽管此处建议使用display: flex;,但现在考虑使用widely supported,请考虑使用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;
}

答案 13 :(得分:0)

为使本主题完整,我发现Here中没有使用固定位置的解决方案。

没有溢出

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>

答案 14 :(得分:-1)

这是我的工作方式,基于百分比的身高以及父母仍根据孩子的身高成长。 在Firefox,Chrome和Safari中可以正常工作。

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

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

答案 15 :(得分:-2)

在尝试我们的之后! chrome知道当我将显示值设置为内联块时,我希望子元素的高度为100%。 btw设置浮动会导致它。

display:inline-block

更新

这不起作用。解决方案是获取parentnode offsetheight并使用javascript在页面和页面上使用它。

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