Question

我有三个嵌套的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;}

您可以检查#middle div是否获得高度500而我希望它填充#outer div。

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

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

Answer 1

你的错误是把'body'和'html'类放到高度：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>

当高度设置为100％时，Div缩放到内容

1 个答案: