1

我有三个嵌套的 div，内部的 div 具有固定的高度，中间的用于填充外部的，外部的用于容纳底部的页脚。但是中间的 div 似乎只和内部的一样高，这是我不想要的。

我将问题简化为以下问题，我认为这是一个最小的例子。我不想更改外部或内部 div 的高度属性，因为这会干扰布局的其余部分。有没有办法通过改变中间 div 的属性来做我想做的事？

这是html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="style.css" />
    </head> 

    <body>
        <div id="outer">
            <div id="middle">
                <div id="inner"></div> 
            </div>
        </div>
    </body>
</html>

和CSS：

html{height:100%;}
body{height:100%;}
#outer{height: auto; min-height: 100%;}
#middle{height: 100%;}
#inner{height:500px;}

您可以检查#middlediv 的高度是否为 500，而我希望它填充#outerdiv。

我是 CSS 的新手，几乎所有的代码都是从不同的教程和/或反复试验中复制而来的。所以，如果我做错了/愚蠢的事情，请原谅我。

编辑：我不明白为什么，但似乎删除 doctype 声明会使问题消失。因此，我更改了代码示例以包含声明。

4

1 回答 1

0

您的错误是将 'body' 和 'html' 类设置为 height: 100% （什么都不做）。相反，我将您的外部 div 设置为 100% 高度。

<html>
<head>
<style type="text/css">
div {border:2px solid black;}
div div {border-color: blue;}
div div div {border-color: red;}
#outer{height: 100%; min-height: 100%;}
#middle{height: 100%;}
#inner{height:500px;}
</style>
</head> 

<body>
    <div id="outer">
        <div id="middle">
            <div id="inner"></div> 
        </div>
    </div>
</body>
</html>

如果您不知道如何在混合中获取页脚，我也给了您一个示例：

<html>
    <head>
<style type="text/css">
div {border:2px solid black;}
div div {border-color: blue;}
div div div {border-color: red;}
#outer{height: 100%; min-height: 100%; position: relative;}
#middle{height: 100%;}
#inner{height:500px;}
#footer{height:100px;width:100%;position:absolute;bottom:0;}
</style>
    </head> 

    <body>
        <div id="outer">
            <div id="middle">
                <div id="inner"></div> 
            </div>
            <div id="footer">This is the footer</div>
        </div>
    </body>
</html>
于 2013-03-20T18:04:28.667 回答