Html 粘性页脚，但具有同一类的多个包装器_Html_Css

Html 粘性页脚，但具有同一类的多个包装器

html css

Html 粘性页脚，但具有同一类的多个包装器,html,css,Html,Css,我继承了一个具有div布局的站点，但我不习惯： <html> <body> <div class="wrap">...</div> <nav>...</nav> <div class="wrap">......</div> <footer> &l

我继承了一个具有div布局的站点，但我不习惯：

<html>
    <body>
        <div class="wrap">...</div>
        <nav>...</nav>
        <div class="wrap">...<!-- main stuff -->...</div>
        <footer>
            <div class="wrap">...</div>
        </footer>
    </body>
</html>


...
...
......
...

其中一个页面有少量内容，因此需要一个粘性页脚。通常我会在CSS中使用类似和设置100%等的东西

我真的不想重写网站的结构。是否有另一种方法将页脚放在屏幕底部，同时保持这种“包装类”结构？

您可以从附加的链接中使用相同的CSS，只需将“页脚”替换为“页脚”，因为您的结构中已经有元素。如果有更多的元素，请使用类似body>footer的内容

类似这样的内容（摘自您附加的链接，仅进行了一次修改）：

如果您只想修改footer.wrap div，请使用footer>.wrap

您可以先包装所有内容，并将页脚保留在包装之外

<html>
<body>
   <div class="wrap-all">
    <div class="wrap">...</div>
    <nav>...</nav>
    <div class="wrap">...<!-- main stuff -->...</div>
    <footer>
        <div class="wrap">...</div>
    </footer>    
  </div>
</body>    
</html>

这肯定会将页脚向下移动，但是，如果我调整浏览器的大小以模拟较小的屏幕，则页脚会穿过我内容的中间部分。另外，我向下滚动的页面在内容的中间有页脚，有没有办法补救这个问题？当你在评论链接中使用这个例子时，这个答案也是正确的。谢谢你，斯洛博丹。将Mario's标记为答案，因为它提供了一个示例，可以在不依赖链接的情况下继续帮助其他人。这对于没有滚动条的页面非常有用，但是如果页面超过屏幕高度并有滚动条，则页脚会被内容的底部截断。将高度添加到“全部包裹css”中，这是一种享受。

<html>
<body>
   <div class="wrap-all">
    <div class="wrap">...</div>
    <nav>...</nav>
    <div class="wrap">...<!-- main stuff -->...</div>
    <footer>
        <div class="wrap">...</div>
    </footer>    
  </div>
</body>    
</html>

 html, body {
 height: 100%;
 }
.wrap-all {
 min-height: 100%;
 /* equal to footer height */
 margin-bottom: -142px; 
 }
 .wrap-all:after {
  content: "";
  display: block;
  }
 footer {
 /* .push must be the same height as footer */
 height: 142px; 
 }