页面扩展时，网站页脚绝对不会停留在底部答案

【问题标题】：Website footer in absolute not staying at bottom when page expands页面扩展时，网站页脚绝对不会停留在底部
【发布时间】：2017-03-26 15:25:45
【问题描述】：

我的页面底部有一个页脚。当我加载页面并且没有滚动条（全屏，没有 y 溢出）时，页脚紧贴在页面底部。我的问题是，当我添加扩展页面高度的内容（需要滚动条）时，页脚保持在同一位置，而我的内容向下移动并扩展页面。我不打算使用position:fixed，因为我只希望用户在一直滚动到页面底部时看到页脚。以下是相关的 HTML 和 CSS：

HTML：

<div id="textbox" style="top:46px;left:45px;margin-right:33px;">ASSUME THERE IS A LOT OF TEXT HERE, CAUSING PAGE TO OVERFLOW DOWNWARDS.</div>

<div id="footer"><p>This is the footer.</p></div>

还有 CSS：

#textbox {
position:relative;
background:rgba(255,255,255,1);
padding:10px;
font-family:arial;
z-index:-1;
box-shadow:0 0 30px rgba(000,000,000,1);
border-radius:10px;
line-height:25px;
}


#footer {
background-color:white;
width:50000px;
height:75px;
position:absolute;
bottom:0px;
left:0px;
color:black;
font-family:arial;
border:0px;
margin:0px
}

如您所见，我虽然使用 position:absolute 和左下角到 0px 可以完成这项工作，但是当我向下滚动时这不起作用，因为页脚保持静止。如前所述，固定不是一种选择，肯定有办法解决这个问题。非常感谢。

【问题讨论】：

我更新了我的答案。您能否将宽度：50000px 更改为宽度：100%；让我知道是否可以解决。
@wuno 请阅读我的最新评论，谢谢。

标签： html css

【解决方案1】：

这里有一个解决方案：

http://codepen.io/anon/pen/PbNWgg

我添加了一个容器 DIV #container1。 CSS 的基本/更改部分是：

html, body {
  height: 100%;
}
#container1 {
  box-sizing: border-box;
  position: relative;
  min-height: 100%;
  padding-bottom: 75px;
}
#footer {
  position: absolute;
  width: 100%;
  bottom: 0px;
  left: 0px;
}

当有很多文本（我插入的）时，页脚位于文本块下方。如果您删除文本的主要部分，您会看到页脚仍保留在窗口底部。

【讨论】：

【解决方案2】：

你在这里需要的是使用 postion:relative to footer buttom 将是 0 ，

#textbox {
background:rgba(255,255,255,1);
padding:10px;
font-family:arial;
z-index:-1;
box-shadow:0 0 30px rgba(000,000,000,1);
border-radius:10px;
line-height:25px;
}


#footer {
background-color:white;
width:50000px;
height:75px;
position:relative;
bottom:0px;
left:0px;
color:black;
font-family:arial;
border:0px;
margin:0px
}

<div id="textbox">
text Here text here
</div> 
<div id="textbox">
text Here text here
</div> 
<div id="textbox">
text Here text here
</div> 
<div id="textbox">
text Here text here
</div> 

<div id="footer"><p>This is the footer.</p></div>

【讨论】：

这根本不起作用，只会使我的页脚比顶部更远。
你在绝对位置上做得对。亲戚不会解决这个问题。请告诉我您使用的是什么浏览器。
位置相对修复问题，请尝试，

【解决方案3】：

让我知道这是否是你想要的。有一个这个 html 的包装类并分配相对于它的位置。

.wrapper{
  position:relative;
  padding-bottom:75px;
}
#textbox {
background:rgba(255,255,255,1);
padding:10px;
font-family:arial;
z-index:-1;
box-shadow:0 0 30px rgba(000,000,000,1);
border-radius:10px;
line-height:25px;
display:block;
}


#footer {
background-color:white;
width:50000px;
position:absolute;
bottom:0px;
left:0px;
color:black;
font-family:arial;
border:0px;
margin:0px;
display:block;

height:75px;
}

获取页脚的高度并显式声明该值并将相同的值分配给包装类的填充底部。

【讨论】：

【解决方案4】：

在footer 上使用relative 位置并在#textbox 上添加margin-bottom，这是您的页脚大小将起作用（如果我理解正确的话）

#textbox {
position:relative;
background:rgba(255,255,255,1);
padding:10px;
font-family:arial;
z-index:-1;
box-shadow:0 0 30px rgba(000,000,000,1);
border-radius:10px;
line-height:25px;
margin-bottom: 75px; 
}


#footer {
background-color:white;
width:100%;
height:75px;

position:relative;
bottom:0px;
left:0px;
color:black;
font-family:arial;
border:0px;
margin:0px
}

See this fiddle

【讨论】：

【解决方案5】：

这是您要查找的内容：

body, html{
  width:100%;
  height:100%;
}
.wrapper{
  position:relative;
  min-height:100%;
  width:100%;
}
.content{
  padding-bottom:75px;
}
#textbox {
  position:relative;
  background:rgba(255,255,255,1);
  padding:10px;
  font-family:arial;
  box-shadow:0 0 30px rgba(000,000,000,1);
  border-radius:10px;
  line-height:25px;
}


#footer {
background-color:white;
width:100%;
height:75px;
position:absolute;
bottom:0px;
left:0px;
color:black;
font-family:arial;
}

<div class="wrapper">
<div class="content">

  <div id="textbox">ASSUME THERE IS A LOT OF TEXT HERE, CAUSING PAGE TO OVERFLOW DOWNWARDS.<br>ASSUME THERE IS A LOT OF TEXT HERE, CAUSING PAGE TO OVERFLOW DOWNWARDS.<br>ASSUME THERE IS A LOT OF TEXT HERE, CAUSING PAGE TO OVERFLOW DOWNWARDS.<br>ASSUME THERE IS A LOT OF TEXT HERE, CAUSING PAGE TO OVERFLOW DOWNWARDS.<br>ASSUME THERE IS A LOT OF TEXT HERE, CAUSING PAGE TO OVERFLOW DOWNWARDS.<br>ASSUME THERE IS A LOT OF TEXT HERE, CAUSING PAGE TO OVERFLOW DOWNWARDS.<br>ASSUME THERE IS A LOT OF TEXT HERE, CAUSING PAGE TO OVERFLOW DOWNWARDS.<br>ASSUME THERE IS A LOT OF TEXT HERE, CAUSING PAGE TO OVERFLOW DOWNWARDS.<br>ASSUME THERE IS A LOT OF TEXT HERE, CAUSING PAGE TO OVERFLOW DOWNWARDS.<br>ASSUME THERE IS A LOT OF TEXT HERE, CAUSING PAGE TO OVERFLOW DOWNWARDS.<br>ASSUME THERE IS A LOT OF TEXT HERE, CAUSING PAGE TO OVERFLOW DOWNWARDS.<br>ASSUME THERE IS A LOT OF TEXT HERE, CAUSING PAGE TO OVERFLOW DOWNWARDS.<br>ASSUME THERE IS A LOT OF TEXT HERE, CAUSING PAGE TO OVERFLOW DOWNWARDS.<br>ASSUME THERE IS A LOT OF TEXT HERE, CAUSING PAGE TO OVERFLOW DOWNWARDS.<br>ASSUME THERE IS A LOT OF TEXT HERE, CAUSING PAGE TO OVERFLOW DOWNWARDS.<br>ASSUME THERE IS A LOT OF TEXT HERE, CAUSING PAGE TO OVERFLOW DOWNWARDS.<br>ASSUME THERE IS A LOT OF TEXT HERE, CAUSING PAGE TO OVERFLOW DOWNWARDS.<br>ASSUME THERE IS A LOT OF TEXT HERE, CAUSING PAGE TO OVERFLOW DOWNWARDS.<br></div>
</div>
  <div id="footer"><p>This is the footer.</p></div>

</div>

【讨论】：