在CSS中将DIV的高度设置为与页面一样高

Question

21

我有一个 DIV，我希望它能够触及屏幕底部（出于外观原因）。有时候内容足够高以达到此目的，但有时候内容太短了，这个 DIV 就无法触及屏幕底部。是否有一个简单的解决方法？

- Tower

6个回答

14

如果有人在之后阅读这篇文章（就像我现在一样），你可以使用下面的方法：

min-height: 100vh;

vh 单位代表视口高度，是屏幕大小的百分比。

- SilentVoid

更加简单易懂和有帮助。非常感谢！ - ankush981

请注意，这会在iPhone（Safari）上引起问题，因为该栏出现在高度为100vh的元素的一部分上方。 - user15367692

7

这是实现的方法：http://ryanfait.com/sticky-footer/，可以让页面底部保持在屏幕下方。

- Tom

4

min-height:100%

假设没有在另一个设置了高度的 div 中，这应该可以工作。

- Jimmeh

2

很好，如果更多的人忽略IE6，也许人们就会停止使用它 :) - Jimmeh

1

这在一些浏览器中可以工作，但是除非在一些常见的浏览器中另有规定，否则body和html元素仅为内容高度。 - Nick Larsen

我无法让它工作？你确定它能工作吗？我尝试了Opera 10.50，Firefox 3.6，Chrome 4，但都没有成功。 - Tower

尝试根据下面/上面的答案设置body，html { height:100％; }。 :) - Jimmeh

3

Jimmeh的回答需要搭配IE6修复：

height: expression( this.scrollHeight < document.body.clientHeight ? "100%" : "auto" )

- peirix

我认为 height: 100% 就足够了 - 如果没有隐藏溢出（或者由于任何模糊原因，高度应该是其他任何值），IE6将设置自动高度。 - Adam Kiss

1

如果您将div的CSS设置为position:absolute，您可以使用以下代码：

.yourDiv {
  top: 0
  bottom: 0

}

- Robusto

1

只有在 div 没有放置在另一个设置了 position（而不是 display）的元素内时，此方法才有效。如果是这种情况，则必须将 html 和 body 元素设置为具有 100% 的高度。 - Nick Larsen

真的。我假设（也许是错误的）这将成为主容器div。否则，为什么要使它从顶部延伸到底部呢？ - Robusto

我不是从顶部到底部拉伸它，而是从y到底部拉伸它，其中y是取决于上层DIV元素（菜单和标题）的位置。 - Tower

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Diodeus - James MacFarlane · Accepted Answer

如果您将DIV的min-height设置为100％，您还需要包括：

body, html {
   height:100%
}

元素会扩展到其容器的大小，因此请确保容器（即页面本身）也具有100％的高度。