Html 具有最小高度的父级内的子级：100% 不继承高度

Question

提问by lamefun

I found a way to make a div container to occupy at least full height of a page, by setting min-height: 100%;. However, when I add a nested div and set height: 100%;, it doesn't stretch to container's height. Is there a way to fix it?

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

采纳答案by ptriek

This is a reported webkit (chrome/safari) bug, children of parents with min-height can't inherit the height property: https://bugs.webkit.org/show_bug.cgi?id=26559

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

Apparently Firefox is affected too (can't test in IE at the moment)

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

Possible workaround:

可能的解决方法：

add position:relative to #containment
add position:absolute to #containment-shadow-left

添加位置：相对于#containment
添加位置：绝对到#containment-shadow-left

The bug doesn't show when the inner element has absolute positioning.

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

See http://jsfiddle.net/xrebB/

见http://jsfiddle.net/xrebB/

Edit on April 10, 2014

2014 年 4 月 10 日编辑

Since I'm currently working on a project for which I reallyneed parent containers with min-height, and child elements inheriting the height of the container, I did some more research.

由于我目前正在处理一个项目，我确实需要父容器带有min-height和继承容器高度的子元素，因此我做了更多研究。

First:I'm not so sure anymore whether the current browser behaviour really is a bug. CSS2.1 specs say:

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

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

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

If I put a min-height on my container, I'm not explicitlyspecifying its height - so my element should get an autoheight. And that's exactly what Webkit - and all other browsers - do.

如果我在我的容器上放置一个 min-height，我没有明确指定它的高度 - 所以我的元素应该得到一个auto高度。而这正是 Webkit - 以及所有其他浏览器 - 所做的。

Second, the workaround I found:

其次，我发现的解决方法：

If I set my container element to display:tablewith height:inheritit acts exactly the same way as if I'd give it a min-heightof 100%. And - more importantly - if I set the child element to display:table-cellit will perfectly inherit the height of the container element - whether it's 100% or more.

如果我将我的容器元素设置为display:tablewithheight:inherit它，它的行为方式与我给它的 amin-height为 100%完全相同。而且 - 更重要的是 - 如果我将子元素设置为display:table-cell它，它将完美地继承容器元素的高度 - 无论是 100% 还是更多。

Full CSS:

完整的CSS：

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

#container {
  background: green;
  display: table;
  height: inherit;
  width: 100%;
}

#content {
  background: red;
  display: table-cell;
}

The markup:

标记：

<div id="container">
  <div id="content">
      <p>content</p>
  </div>
</div>

See http://jsfiddle.net/xrebB/54/.

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

Answer 2

回答by Kushagra Gour

Add height: 1pxto parent container. Works in Chrome, FF, Safari.

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

Answer 3

回答by Kevin Upton

thought I would share this, as I didnt see this anywhere, and is what I used to fix my solution.

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

SOLUTION: min-height: inherit;

解决方案：min-height: inherit;

I had a parent with a specified min height, and I needed a child to also be that height.

我有一个具有指定最小高度的父母，我需要一个孩子也达到这个高度。

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

This way the child now acts as height 100% of the min-height.

通过这种方式，孩子现在充当了最小高度的 100% 的高度。

I hope some people find this useful :)

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

Answer 4

回答by JW.

This was added in a comment by @Hymanocnr but I missed it. For modern browsers I think this is the best approach.

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

It makes the inner element fill the whole container if it's too small, but expands the container's height if it's too big.

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

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

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

Answer 5

回答by Jeremy Hewett

Kushagra Gour's solution does work (at least in Chrome and IE) and solves the original problem without having to use display: table;and display: table-cell;. See plunker: http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU

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

Setting min-height: 100%; height: 1px;on the outer div causes its actual height to be at least 100%, as required. It also allows the inner div to correctly inherit the height.

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

Answer 6

回答by Stickers

In addition to the existing answers, there is also viewport units vhto use. Simple snippet below. Of course it can be used together with calc()as well, e.g. min-height: calc(100vh - 200px);when page header and footer have 200pxheight together.

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

body {
  margin: 0;
}

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

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

Answer 7

回答by Mike Hopkins

I don't believe this is a bug with browsers. All behave the same way - that is, once you stop specifying explicit heights, min-height is basically a "last step".

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

It appears to be exactly how the CSS 2.1 spec suggests: http://www.w3.org/TR/CSS2/visudet.html#the-height-property

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

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

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

Therefore, as the min-heightparent does not have an explicit heightproperty set, it defaults to auto.

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

There are some ways around this possibly by using display: table-cell, or newer styles such as flexbox, if that is possible for your targeted audience's browsers. You can also subvert this in certain situations by using the topand bottomproperties on an absolutely positioned inner element, which gives you 100% height without specifying so.

display: table-cell如果您的目标受众的浏览器可能的话，可以通过使用或更新的样式（例如 flexbox）来解决此问题。在某些情况下，您还可以通过在绝对定位的内部元素上使用top和bottom属性来颠覆这一点，这会给您 100% 的高度而无需指定。

Answer 8

回答by Jonas Stensved

For googlers:

对于谷歌员工：

This jquery-workaround makes #containment get a height automatically (by, height: auto), then gets the actual height assigned as a pixel value.

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

Answer 9

回答by Distortum

Although display: flex;has been suggested here, consider using display: grid;now that it's widely supported. By default, the only child of a grid will entirely fill its parent.

尽管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;
}

Answer 10

回答by Simon Martineau

The best way to achieve this nowadays is to use display: flex;. However you might run into an issue when trying to support IE11. According to https://caniuse.comusing flexbox :

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

IE 11 does not vertically align items correctly when min-height is used

使用 min-height 时，IE 11 无法正确垂直对齐项目

Internet Explorer compatible solution

Internet Explorer 兼容解决方案

The solution is to use display: table;on the parent and display: table-row;on the child both with height: 100%;as a replacement for min-height: 100%;.

解决方案是display: table;在父级和display: table-row;子级上使用，height: 100%;作为min-height: 100%;.

Most of the solutions listed here use display:table, table-rowand/or table-cell, but they don't replicate the same behaviour as min-height: 100%;, which is:

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

Inherit the computed height of the parent (as opposed to inheriting its heightproperty);
Allow the parent's height to exceed its min-height;

继承父级的计算高度（而不是继承其height属性）；
允许父母的身高超过其min-height;

While using this solution, the behaviour is the same and the property min-heightis not needed which allows to get around the bug.

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

Explanation

解释

The reason why it works is because, unlike most elements, elements using display:tableand table-rowwill always be as tall as their content. This makes their heightproperty behave similarly to min-height.

它之所以有效，是因为与大多数元素不同，使用display:table和的元素table-row将始终与它们的内容一样高。这使得它们的height属性的行为类似于min-height。

Solution in action

解决方案在行动

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>

Html 具有最小高度的父级内的子级：100% 不继承高度

提问by lamefun

采纳答案by ptriek

回答by Kushagra Gour

回答by Kevin Upton

回答by JW.

回答by Jeremy Hewett

回答by Stickers

回答by Mike Hopkins

回答by Jonas Stensved

回答by Distortum

回答by Simon Martineau

Internet Explorer compatible solution

Internet Explorer 兼容解决方案

Explanation

解释

Solution in action

解决方案在行动

相关推荐

最近更新

标签

Html 具有最小高度的父级内的子级：100% 不继承高度

提问by lamefun

采纳答案by ptriek

回答by Kushagra Gour

回答by Kevin Upton

回答by JW.

回答by Jeremy Hewett

回答by Stickers

回答by Mike Hopkins

回答by Jonas Stensved

回答by Distortum

回答by Simon Martineau

Internet Explorer compatible solution

Internet Explorer 兼容解决方案

Explanation

解释

Solution in action

解决方案在行动

相关推荐

Html 在骨架中居中 div

Html 从按钮组中只选择一个按钮

Html CSS 非包装浮动 div

Html 使元素不可点击（点击它后面的东西）

相关推荐

最近更新

标签