问嵌套Div的构建页脚(已尝试清除:两者)
EN

Stack Overflow用户

提问于 2012-02-28 08:14:39

回答 1查看 225关注 0票数 0

我试图让下面的“容器”被识别为包装器div，并采用其他元素的高度。这样我就可以动态地调整其他元素的大小，而容器也可以调整大小，将页脚放在底部。

我已经找遍了(已经找了好几个小时了！)在解决方案和到处提到清楚:两者或overflow:自动，这两个似乎都不起作用

如果有人能指出我哪里错了，我会很高兴的！

<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>

css

html

css-float

回答 1

Stack Overflow用户

发布于 2012-02-28 08:44:33

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

查看您的代码，您有一些需要修复的问题：

当您将position:absolute应用于一个元素时，它会将该元素从自然流中移除，这意味着它不会影响其余元素。这就是为什么你的页脚在文档的顶部。
br和hr都是空元素，应该写成这样：<br />和<hr />等。
我建议把所有的样式都放在<style>区域，而不是用内联样式把它弄得到处都是。用#footer {width:100%}之类的css代替<div WIDTH="100%">，把它放在文档头或者外部的file.
overflow:hidden中，这样clear:both就会一直起作用。如果没有，请检查您的代码是否有错误。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/9474477

复制

相似问题

问嵌套Div的构建页脚(已尝试清除:两者)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问嵌套Div的构建页脚(已尝试清除:两者)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问嵌套Div的构建页脚(已尝试清除:两者)
EN