Question

我的页面底部有一个页脚。当我加载页面并且没有滚动条（全屏，没有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和seeting left和bottom to 0px可以完成这项工作，但是当我向下滚动因为页脚保持静止时这不起作用。如上所述，固定不是一种选择，肯定有办法解决这个问题。非常感谢提前。

Answer 1

这里你需要的是使用postion：相对于footer buttom将是0，

＆＃13;

#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
}

＆＃13;

<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>

＆＃13;

Answer 2

让我知道这是否是你想要的。有一个这个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;
}

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

Answer 3

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

#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

Answer 4

以下是您正在寻找的内容：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 5

以下是您的解决方案：

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;
}

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

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

5 个答案: