Question

我正在尝试让下面的“容器”被识别为包装div并占据其他元素的高度。这样我可以动态调整其他元素的大小，容器调整大小将页脚放在底部。

我已经看了一遍（现在几个小时！）在解决方案中，到处提到清楚：两者或溢出：auto，两者似乎都不起作用

如果有人可以指出我哪里出错了，真的很喜欢它！

<HTML>
<head>

    <style type="text/css"> 
    body {
                text-align: left;
                font-size: small;
        }
    #Layer-2 {
                position: absolute;
                margin-left: -640px;
                left: 50%;
                top: +0px;
                width: 1280px;
                z-index: 2;
            }


    #Layer-3 {
                position: absolute;
                left: 146px;
                top: 33px;
                width: 687px;
                height: 59px;
                z-index: 3;
            }


    #Layer-4 {
                position: absolute;
                left: 157px;
                top: 125px;
                width: 174px;
                height: 843px;
                z-index: 4;
            }


    #Layer-5 {
                position: absolute;
                left: 361px;
                top: 286px;
                width: 776px;
                height: 682px;
                z-index: 5;
                overflow: auto;
            }
    hr {
            display: block; 
            clear: left; 
            margin: -0.66em 0;
            visibility: hidden;
    }

#container {overflow:hidden;}


    </Style>
</head>
<body>
<div id="container">
    <div id="Layer-2">

            <div id="Layer-5"  >
            Hello World
            </div>

            <div id="Layer-4" >
            Hello World 2
            </div>

            <div id="Layer-3" >
            Hows Things today?
            </div>
        <hr>
         <br style="clear: both; height: 0; visibility: hidden;">
    </div>
    <br style="clear: both; height: 0; visibility: hidden;">
</div>  
    <div WIDTH="100%"> Footer </div>

</body>
</html>

Answer 1

经过一些更正后，您的代码为fiddle。请注意，我已经为所有div元素添加了边框，以便了解嵌套是如何进行的。您的“问题”是所有position:absolute CSS规则中的div。我还删除了所有z-index规则，因为它们不再是必需的。

查看代码，您需要解决一些问题：

当您将position:absolute应用于元素时，它会将元素从自然流中移出，这意味着它不会影响元素的其余部分。这就是为什么你的页脚位于文档的顶部。
br和hr是空元素，应该写成：<br />和<hr />等。
我建议将所有css样式保留在<style>区域，而不是将其全部放在具有内联样式的地方。例如：而不是<div WIDTH="100%">使用类似#footer {width:100%}的css并将其放在文档的头部或外部文件中。
overflow:hidden和clear:both应始终有效。如果他们不这样做，请检查代码是否有错误。

嵌入Div来构建页脚（已尝试过清除：两者）

1 个答案: