Question

我正在使用网页超过100% browser window height的网站和不的网站。所以，我需要的是高度至少为100%，但如果适用则更高。

我当前的CSS看起来像是：

html, body {
  min-height: 100%;
  height: auto;
}

这最初似乎工作正常但后来我意识到<body> NOT 与height具有相同的<html>，但似乎使用标准height {1}}。就像<body> NOT 尊重min-height属性一样。

希望有人能够提出一些想法或对此有所启发。

UPDATE1 似乎HTML的行为就像是默认行为一样。

UPDATE2 http://jsfiddle.net/rpz4rd4c/5

UPDATE3 根据（MichaelHarvey）建议的评论body height相对于html height（不是min-height），如果这是真的，则以下代码应该工作：

html {
  min-height: 100%;
  height: auto;
}

body {
  height: 100%;
}

然而，它没有。

最终更新

此页面上提供的解决方案“正常”但是它们可能是JS插件的错误。我建议人们使用100vh解决方案或我接受的解决方案（主要是因为它不需要CSS3）。我想对我这样的问题100％准确的解决方案（让所有分隔符和元素100％与浏览器窗口无关）将仅使用inline CSS并在较长的页面使用min-height并且{ {1}}适合浏览器。这可能需要一些height。

＆LT; 3

Answer 1

视口单位救援！ CSS中的vh单位相对于视口高度而言，无论父元素如何都是如此。这是你应该放在身上的CSS：

body{
    min-height:100vh;
    margin:0;
}

请参阅http://jsfiddle.net/rpz4rd4c/3/了解我的工作示例

编辑：对于您的其他元素，也需要至少100％的高度，只需将min-height:100vh添加到他们的CSS样式中。谢谢@misterManSam！

Answer 2

这似乎适用于Chrome：

html {
    height: 100%;
}
body {
    min-height: 100%;
    height: auto;
}

http://jsfiddle.net/rpz4rd4c/10/

当然，这意味着html元素永远不会占据整个孩子的高度（只有视口）。希望这不是问题。

Answer 3

如果没有真正了解原因，或许这就是你要找的东西？

HTML：

<html>
  <body>
    <div class='wrapper'>
      <div class='inner'>
        <!-- your content here -->
      </div>
    </div>
  </body>
<html>

的CSS：

html,body{
  height:100%;
  overflow:hidden;
}

.wrapper{
  height:100%;
  overflow:scroll;
  background:#f9f9f9;
}

html和body总是100％高度，无论内容长度如何，它仍会滚动。不确定锁定html / body滚动的副作用（很多潜在的问题）但是，所以我要警惕。

示例：http://codepen.io/jessekernaghan/pen/GocHg

min-height |身高html，身体表现奇怪

3 个答案: