Css 嵌套Div'；要生成页脚的s（已尝试清除：两个）_Css_Html_Css Float

Css 嵌套Div'；要生成页脚的s（已尝试清除：两个）

css html

Css 嵌套Div'；要生成页脚的s（已尝试清除：两个）,css,html,css-float,Css,Html,Css Float,我试图将下面的“container”识别为包装器div，并考虑其他元素的高度。这样我就可以动态调整其他元素的大小，并且容器可以调整大小，将页脚放在底部我已经看了所有的解决方案（现在已经有几个小时了！），到处都提到了清晰的：两者都有或溢出：自动，两者似乎都不起作用如果有人能指出我错在哪里，我会非常喜欢的 <HTML> <head> <style type="text/css"> body { text-al

我试图将下面的“container”识别为包装器div，并考虑其他元素的高度。这样我就可以动态调整其他元素的大小，并且容器可以调整大小，将页脚放在底部

我已经看了所有的解决方案（现在已经有几个小时了！），到处都提到了清晰的：两者都有或溢出：自动，两者似乎都不起作用

如果有人能指出我错在哪里，我会非常喜欢的

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


身体{
文本对齐：左对齐；
字体大小：小；
}
#第二层{
位置：绝对位置；
左边距：-640px；
左：50%；
顶部：+0px；
宽度：1280px；
z指数：2；
}
#第三层{
位置：绝对位置；
左：146px；
顶部：33px；
宽度：687px；
高度：59px；
z指数：3；
}
#第四层{
位置：绝对位置；
左：157px；
顶部：125px；
宽度：174px；
身高：843px；
z指数：4；
}
#第五层{
位置：绝对位置；
左：361px；
顶部：286px；
宽度：776px；
身高：682px；
z指数：5；
溢出：自动；
}
人力资源{
显示：块；
清除：左；
保证金：-0.66em 0；
可见性：隐藏；
}
#容器{溢出：隐藏；}
你好，世界
你好，世界2
今天怎么样？





页脚

以下是经过一些更正后的代码示例。请注意，我已经为所有

div

元素添加了边框，以便查看每个元素是如何嵌套的。您的“问题”是所有

div

CSS规则中的

position:absolute

。我还删除了所有的

z-index

规则，因为它们不再是必需的

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

当您将
```
position:absolute
```
应用于一个元素时，它会将该元素从自然流中移除，这意味着它不会影响其余元素。这就是您的页脚位于文档顶部的原因
```
br
```
和
```
hr
```
是空元素，应该这样写：
和
等
我建议将所有css样式保留在
区域，而不是使用内联样式。例如：不要使用像
```
#footer{width:100%}
```
这样的css，而是将其放在文档的头部或外部文件中

溢出：隐藏

和

清除：两者都应始终有效。如果没有，请检查您的代码是否有错误

大家好，为回复干杯！我使用绝对定位来定位菜单、标题和内容，因此需要绝对定位div。环顾论坛，我发现大多数人建议使用clear:tware函数或一些变体来解决定位问题。然而，这似乎不在上面工作，有什么想法吗？也完全同意整理到样式表中，但是很匆忙，道歉使用位置：绝对将元素从流程中移除，因此明确：两者都是或同等的根本不起作用。如果必须对元素进行绝对定位，那么实现尝试的唯一方法就是将页脚放在底部元素中。这里有一个例子。请记住，正确的方法是通过定位：静态
和浮动。啊，我已经看到了我的方法的错误（教我如何散列代码！）谢谢！