最小高度为100%的内部div

Question

最小高度为100%的内部div

3

我希望有两个嵌套的div：

<div class="outer">
    <div class="inner">A div in a div!!!</div>
</div>

外部div的高度应至少与窗口高度相同。因此，我将html和body的高度设置为100％，以便外部div可以具有min-height：100％，并且由于已知html和body元素的高度，因此这是明确定义的。

然而，min-height不能说明外部div的实际高度。因此，在计算内部div时它没有被定义。内部div可能会导致外部div变得更大，或者内部div可能比外部div更矮。

就我所搜索的内容而言，我找到了两个解决方案，但它们在上述情况下都会出现问题：

http://jsfiddle.net/5ML3W/

.outer {
    min-height: 100%;
    height: 100%;
    width: 500px;
    background: green;
}
.inner {
    width: 250px;
    margin-left: 50px;
    min-height:100%;
    background: red;
}
html, body{
    height:100%;
}

http://jsfiddle.net/bkjHa/1/

.outer {
    min-height: 100%;
    width: 500px;
    background: green;
}
.inner {
    width: 250px;
    margin-left: 50px;
    min-height:100%;
    background: red;
}
html, body{
    height:100%;
}

外部 div 的高度属性是区别。

如何让我的内部 div 至少占用窗口大小的100%，并且当内部 div 变大时，外部 div 也随之拉伸？

在我的真实应用程序中，外部 div 是透明的，因此我并不关心。但是，如果有解决方案或者解释说明这样做不可能，那就更好了！

- Herbert

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Charles Ingalls · Accepted Answer

我实际上对如何解决这个“问题”非常好奇。如果您在外部div上应用display: table，并在内部div上应用display: table-cell，它将按照您想要的方式工作。

1. Fiddle：没有任何内容的最小高度为100％ http://jsfiddle.net/5ML3W/1/

2. Fiddle：如果向内部div添加内容，则两个div都会扩展 http://jsfiddle.net/TVY6K/

以下是CSS：

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

*, *:before, *:after {
  -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
 }

.outer {
    height: 100%;
    width: 500px;
    background: green;
    display: table;
    padding: 0 50px;

}
.inner {
    display: table-cell;
    width: 250px;
    background: red;
}