Question

我觉得有点惭愧，我必须在这里发布这个问题。我的网页有一个页脚，我想留在底部，当我添加内容时，我希望页脚向下移动。

我尝试了几种可通过stackoverflow获得的解决方案，但遗憾的是没有成功。

TL; DR 粘在底部的粘性页脚

我的HTML结构：

<html>
<head></head>
<body>
   <div id="pageWrap">
       <nav></nav>
       <div id="contentWrap">
           <div id="contentHeader">some text</div>
           <div id="content">
               <!-- Content -->
           </div>
       </div>
   </div>
   <footer></footer>
</body>

这是奇怪的事情：当我使用inspect元素功能时，我注意到我的pagewrap高度为182px。在pagewarp中我的div有比182px更大的内容，我甚至都没有设置高度。

基本上内部的元素包裹在该包装边界的外。我觉得这会搞砸页脚位置。

编辑：

相关CSS：

html, body {  height: 100%;  }
#contentWrap{ width: 90%;  margin: 0 auto; word-wrap: break-word }
#content{ margin-top: 30px;}
footer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #EDEDED;
    border-top: 1px solid #D6D6D6;
}

Answer 1

尝试浮动#pagewrap或添加overflow:hidden。它使元素内容意识到可能导致它扩展。这就是我能想到的，没有看到演示的东西。

如果您希望#pagewrap缩放position:relative，还应确保#pagewrap内的元素设置为SELECT `generateoffset` FROM `opa`.`sddrecurrencetype` WHERE `sddrecurrencetypeid`=1;。

HTML / CSS - 粘滞页脚问题

1 个答案: