HTML / CSS - 粘滞页脚问题

时间:2016-04-29 13:02:31

标签: html css

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

我尝试了几种可通过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;
}

1 个答案:

答案 0 :(得分:0)

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

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

豫ICP备18024241号-1