Question

我想在页面底部显示DIV。但是，使用下面的代码，DIV似乎位于浏览器窗口的底部而不是页面。

请参阅随附的演示。

＆＃13;

html, body {
  height: 100%;
  margin: 0;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #CCC;
}

.main {
  background-color: #DDD;
}

＆＃13;

<div class="main">MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT</div>
<div class="footer">THIS IS THE FOOTER</div>

＆＃13;

Answer 1

html, body {
  height: 100%;
  margin: 0;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #CCC;
}

.main {
  background-color: #DDD;
  margin-bottom: 50px;
}

<div class="main">MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT</div>
<div class="footer">THIS IS THE FOOTER</div>

将位置更改为fixed！您还应该对主要内容应用一些底部边距。

Answer 2

它就像删除一样简单：

position: absolute;

您还可以删除left，right，bottom。

＆＃13;

html, body {
  height: 100%;
  margin: 0;
}

.footer {
  height: 50px;
  background-color: #CCC;
}

.main {
  background-color: #DDD;
}

＆＃13;

<div class="main">MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT</div>
<div class="footer">THIS IS THE FOOTER</div>

＆＃13;

Answer 3

您的页脚div设置为绝对值，因此它相对于第一个非静态定位祖先定位。在这种情况下，那将是你的身体标签。由于你的body标签设置为100％高度，你的body标签从它的祖先（html标签）获得它的高度，而html标签也设置为100％height ...第一个非静态定位元素页脚div将是相对于浏览器窗口高度为100％的元素。

即。你的代码没有被破坏;这是它的工作原理。

除非“页面”，否则表示显示可见内容。这将是一个不同的问题...... "How do I put a div at the bottom of my visible content, not the bottom of the page?"

Answer 4

＆＃13;

html, body {
  height: 100%;
  margin: 0;
}

.footer {
  position: fixed;
  bottom: 0;

  height: 50px;
  background-color: #CCC;
}

.main {
  background-color: #DDD;
}

＆＃13;

<div class="main">MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT<br>MAIN CONTENT</div>
<div class="footer">THIS IS THE FOOTER</div>

＆＃13;

将DIV高度设置为页面的100％，而不是浏览器窗口

4 个答案: