HTML/CSS - 粘滞页脚问题

我觉得有点惭愧，我不得不在这里发表这个问题。我的网页有一个页脚，我想留在底部，当我添加内容时，我希望页脚只是向下移动。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>

下面是奇怪的事情：当我使用检查元素功能，我发现我的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; 
}

来源

2016-04-29 Dubb

你应该发布你的CSS以及。 – sweaver2112

当您使用位置时发生了什么：固定为页脚元素？ –

@ sweaver2112我更新了问题:) – Dubb

尝试浮动#pagewrap或添加overflow:hidden。它使得元素内容知道，这可能导致它缩放。没有看到演示的东西，我能想到的就是这些。

如果您希望它们缩放#pagewrap，您还应该确保#pagewrap中的元素设置为position:relative。

来源

2016-04-29 13:06:24 cpalinckx

HTML/CSS - 粘滞页脚问题

回答

相关问题