严格模式下 100% 高度

Question

我有一个在怪癖模式下看起来不错的网站：

始终显示导航栏
内容有最小高度
页面放大时内容被拉伸：内容高度=文档高度-导航栏高度-页脚高度

现在，我想通过添加 <!DOCTYPE html> 更改为严格模式。我尝试了很多东西，但没有得到相同的行为。内容不再被拉伸。

我把代码放在这个 fiddle: http://jsfiddle.net/5e1yvLxj/

在 fiddle 中激活严格模式。

index.html

<html lang="en">
  <head>
    <link href="main.css" rel="stylesheet"/>
  </head>
<body>
  <div id="nav">
  </div>
  <div id="messages">
   <div id="chat-box">
   </div>
  </div>
  <div id="footer">
  </div>
</body>

main.css

html {
  min-height: 100%;
  position: relative; 
}

body {
  background-color: #004269; 
  margin-top: 112px;    /* nav */
  margin-bottom: 190px; /* footer */
}

#nav {
  height: 100px;
  position: absolute;
  top: 0;
  width: 100%;
  background-color: #227733;
}

#messages {
  position: relative;
  margin: 0;
  position: relative;
  min-height: 200px;
  padding: 10px;
  background-color: white;
  padding: 15px;  }

#chat-box {
  position: relative;
  min-height: inherit;
  padding-top: 0px;
  height: 100%;
}

#footer {
  padding-top: 20px;
  background-color: #227733;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 150px;
}

Answer 1

只需使用其中一种粘性页脚技术即可：

document.getElementById("messages").onclick = function() {
  var p = document.createElement("p");
  p.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
  this.appendChild(p);
}

html, body {
  margin: 0;
  height: 100%;
}
#nav {
  height: 100px;
  background-color: #227733;
  position: relative; /* force higher z-index than next divs */
}
#footer {
  height: 150px;
  background-color: #227733;
}
#messages {
  min-height: 100%;
  margin-top: -100px; /* match header height */
  margin-bottom: -150px; /* match footer height */
  background-color: #EEEEEE;
}
#messages:before {
  content: "";
  display: block;
  height: 100px; /* match header height */
}
#messages:after {
  content: "";
  display: block;
  height: 150px; /* match footer height */
}

<div id="nav">#nav</div>
<div id="messages">#messages (click to add content)</div>
<div id="footer">#footer</div>

Answer 2

您使用了过多的位置：相对和绝对。这在某些情况下可能很有用，但在这里没有用。尝试以下方法进行更改。

您还可以使用计算器使用静态导航和页脚高度的百分比来计算像素。

html {
height: 100%;
}

body {
  background-color: #004269; 
    /* nav */
   /* footer */
    height: 100%;
    
}

#nav {
  height: 100px;
  width: 100%;
  background-color: #227733;
    margin-top:0px;
}

#messages
{
  margin: 0;
  background-color: white;
  padding: 15px;
  height: calc(100% - 100px - 150px);
  overflow: hidden;
}

#chat-box {
  min-height: inherit;
  padding-top: 0px;
    
    margin: 0;
  background-color: white;
  padding: 15px;
}

#footer {
  padding-top: 20px;
  background-color: #227733;
  margin-bottom: 0px;
  width: 100%;
  height: 150px;
}

Answer 3

这是一个小 JavaScript，无需修改已有的任何其他内容即可完成此操作：

window.onload = function() {
    var nav = parseInt(document.defaultView.getComputedStyle(document.getElementById('nav'), null).height),
        footer = parseInt(document.defaultView.getComputedStyle(document.getElementById('footer')).height);
    document.getElementById('messages').setAttribute('style', 'height: ' + (window.innerHeight - nav - footer) + 'px;');
}

JSFiddle：http://jsfiddle.net/7kobcy8o/

我验证了它在 IE11 和 Chrome 39.

中的工作

严格模式下 100% 高度

100% height in strict mode

html

css

doctype