css – 父级内的子级,最小高度100％不继承高度

style.css

html,body
{
  height: 100%;
}

body
{
  margin: 0;
  padding: 0;
}

#containment
{
  width: 60%;
  min-width: 780;
  min-height: 100%;
  margin: 0 auto 0 auto;
  padding: 0;
  background: #ff2;
}

#containment-shadow-left
{
  background: url(images/shadow-left.png) left repeat-y;
  padding-left: 16px;
  height: 100%;
}

page.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>X</title>
  <Meta http-equiv="content-type" content="text/html;charset=utf-8"/>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>

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

</body>
</html>

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

解决方法

这是一个报告的webkit(chrome / safari)错误，父亲的最小高度的孩子不能继承的高度属性： https://bugs.webkit.org/show_bug.cgi?id=26559

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

可能的解决方法：

>添加位置：相对于#containment
> add position：absolute to#containment-shadow-left

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

见http://jsfiddle.net/xrebB/

于2014年4月10日修改

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

首先：我不太确定现在的浏览器行为是否真的是一个错误。 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’.

如果我把一个最小高度放在我的容器，我没有明确指定它的高度 – 所以我的元素应该得到一个自动高度。这正是Webkit和所有其他浏览器。

二，解决方法我发现：

如果我将我的容器元素设置为display：table with height：inherit，它的行为方式完全一样，如果我给它一个最小高度为100％。更重要的是 – 如果我设置子元素显示：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/。

原文地址：https://www.jb51.cc/css/223506.html

css – 父级内的子级,最小高度100％不继承高度

解决方法

相关推荐