Question

我正在尝试获取2个嵌套页面容器div，以获得页面的最小高度。我能够使用单个页面容器找到此code，但如果我添加另一个外部容器，则逻辑会崩溃。

这是html和css。（我希望蓝色和红色div的高度相同。如果移除<div id='outer'>，红色就是我想要的。）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>CSS Layout - 100% height</title>
    <style>

 *
 {
    margin:0;
    padding:0;
    border:0;
 }

html,body
{
    height:100%;
    background:gray;
}

div#container
{
    position:relative;
    margin:0 auto;
    width:750px;
    background:red;

    height:auto !important; 
    height:100%; 
    min-height:100%; 
}

div#outer
{
    position:relative;
    margin:0 auto;
    width:800px;
    background:blue;

    height:auto !important; 
    height:100%; 
    min-height:100%; 
}

div#header
{
    background:#ddd
}

div#footer
{
    position:absolute;
    width:100%;
    bottom:0;
    background:#ddd;
}

    </style>
</head>
<body>
    <div id="outer">
        <div id="container">
            <div id="header">
                <p>Sometimes things that used to be really simple with tables can still appear pretty hard with CSS. This layout for instance would consist of 3 cells; two with a fixed height, and a third one in the center filling up the remaining space. Using CSS, however, you have to take a different approach.</p>
            </div>

            <div id="content">
                <p>
                    Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. 
                </p>

            </div>

            <div id="footer">
                <p>
                    This footer is absolutely positioned to bottom:0; of  #container. The padding-bottom of #content keeps me from overlapping it when the page is longer than the viewport.
                </p>
            </div>
        </div>
    </div>



</body>

在搜索结果时，似乎无法进行此操作，因为height:100%和min-height:100%仅适用于正文后的第一个元素。有关如何做到这一点的任何建议？浮动div？

Answer 1

min-height不适用于嵌套div。

Answer 2

你不能使用

height:auto !important; 
height:100%; 
min-height:100%;

同时以相同的顺序你可以使用：

height: auto !important;
height:100%;

或者您可以使用：

min-height:100%;
height:auto;

最小高度应该在高度属性之前。希望这可以解决问题。

嵌套div的最小页面高度

2 个答案: