Question

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

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

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

我把代码放在这个小提琴中：http://jsfiddle.net/5e1yvLxj/

在小提琴中，严格模式被激活。

的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

你使用太多的位置：相对和绝对。这在某些情况下很有用，但在这里不行。请尝试以下方法进行更改。

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

＆＃13;

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

＆＃13;

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％高度

3 个答案: