将DIV高度设置为页面的100％，而不是浏览器窗口[重复]答案

【问题标题】：Set DIV height to 100% of page, not the browser window [duplicate]将DIV高度设置为页面的100％，而不是浏览器窗口[重复]
【发布时间】：2016-06-28 21:12:46
【问题描述】：

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

请查看随附的演示。

html, body {
  height: 100%;
  margin: 0;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #CCC;
}

.main {
  background-color: #DDD;
}

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

【问题讨论】：

脱掉position: absolute和bottom，left，right。不需要。
你想让页脚粘在页面底部吗？
由于没有人提到过 flex（即使是在副本中），我在这里做了一个例子：jsfiddle.net/niklasmh/yy9w6fc3。 Flex 专为布局而设计，几乎在所有地方都受支持。

标签： html css

【解决方案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！您还应该对主要内容应用一些底部边距。

【讨论】：

【解决方案2】：

就像删除一样简单：

position: absolute;

您也可以删除left、right、bottom。

html, body {
  height: 100%;
  margin: 0;
}

.footer {
  height: 50px;
  background-color: #CCC;
}

.main {
  background-color: #DDD;
}

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

【讨论】：

这将使它位于内容的底部。它需要位于页面底部。
@reado ...我不明白你的意思。您在问题中的代码位于浏览器窗口的底部。我在答案中的答案位于内容页面的底部。
@reado 你的意思是你想要一个最小高度，这样如果你的内容没有足够长滚动，页脚就会在底部？

【解决方案3】：

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

I.E.您的代码没有损坏；这就是它的工作原理。

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

【讨论】：

【解决方案4】：

html, body {
  height: 100%;
  margin: 0;
}

.footer {
  position: fixed;
  bottom: 0;

  height: 50px;
  background-color: #CCC;
}

.main {
  background-color: #DDD;
}

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

【讨论】：

位于浏览器底部，而不是页面。
浏览器只是body标签，默认情况下body标签是所有子元素的父元素。