3

我想要两个嵌套的div：

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

两者都应该至少是窗口的高度。所以当然，我将 html 和 body 的高度设置为 100%，这样外部 div 就可以有一个min-height:100%，并且由于 html 和 body 元素的高度是已知的，所以这是很好定义的。

但是，min-height并没有说明外部 div 的实际高度。因此，当内部 div 被“计算”时，它没有被定义。内部 div 可能会迫使外部 div 变大，或者内部 div 可能比外部 div 低。

据我搜索，我发现了 2 个解决方案，每个解决方案都在上述情况下中断：

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 变大，如何强制我的内部 div 至少为窗口大小的 100% 并且我的外部 div 拉伸？

在我的真实世界应用程序中，外部 div 是透明的，所以我并不在意。但是，我有点好奇，修复或解释我想要的东西是不可能的会很好！

4

1 回答 1

3

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

1.小提琴：最小高度100%，没有任何内容 http://jsfiddle.net/5ML3W/1/

2. 小提琴：如果内容被添加到内部 div http://jsfiddle.net/TVY6K/两个 div 的扩展

这是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;
}
于 2013-11-06T20:43:49.380 回答