个人中心
gpt4 book ai didi

css - 嵌套 Div 以构建页脚(已尝试清除 :both)

转载 作者：太空宇宙 更新时间：2023-11-04 16:03:34 26 4
gpt4 key购买 nike

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

我已经仔细查看了解决方案(现在已经几个小时了!)，到处都提到了 clear:both 或 overflow: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>

最佳答案

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

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

  • 申请时position:absolute对于一个元素，它将元素从自然流中移除，这意味着它不会影响其余元素。这就是您的页脚位于文档顶部的原因。
  • br和 hr是空元素，应该这样写:<br />和 <hr />等
  • 我建议将所有 css 样式保留在 <style> 中区域而不是用内联样式到处都是。例如:而不是 <div WIDTH="100%">使用像 #footer {width:100%} 这样的 css并将其放在文档的头部或外部文件中。
  • overflow:hidden和 clear:both应该总是工作。如果他们不这样做，请检查您的代码是否有错误。

关于css - 嵌套 Div 以构建页脚(已尝试清除 :both)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9474477/

26 4 0
文章推荐： javascript - Angular 2 - 对象属性返回为未定义，但它们存在
文章推荐： css - 创建固定在滚动条上的绝对定位 div - 这可能吗？
文章推荐： jquery - 在 CSS 和 jQuery 中应用 toggleClass 之前设置 .class 的初始状态
文章推荐： c++ - 内联变量的语义
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com