html - 展开页面集html和css

Question

我正在构建一个新的博客，它在内容 div 中有一个评论部分。目前，我已经为正文、页眉、导航、内容和页脚设置了我的 css，如下所示。

内容 div 将根据所写评论的数量进行扩展。如何设置内容 div 的 css/html，以便当更多评论(例如:- 200)时，页面将自动扩展。现在我已经将高度和宽度设置为 100%

html, body {
    height: 100%;
    width: 100%;

}

#header {
    background-color:red;
    height:10%;
    margin-bottom:1%;
}
#naigator {
    background-color:red;
    height:5%;
    margin-bottom:1%;
}

#content {
    background-color:red;
    height:75%;
    margin-bottom:1%;
}

#footer {
    background-color:red;
    height:10%
}

Answer 1

改变content的高度样式为min-height:

function addContent() {
  var content= document.getElementById('content');
  content.innerHTML = content.innerHTML+'testing … ';
  if(content.innerHTML.length < 5000) {
    setTimeout(addContent,10);
  }
}

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

#header {
  background-color:#fed;
  height:9%;
  margin-bottom:1%;
}

#navigator {
  background-color:#def;
  height:4%;
  margin-bottom:1%;
}

#content {
  background-color:yellow;
  min-height:74%;
  margin-bottom:1%;
  font: 20pt verdana;
}

#footer {
  background-color:#fed;
  height:10%;
}

<div id="header">
  <button onclick="addContent()">Add Content</button>
</div>
<div id="navigator"></div>
<div id="content"></div>
<div id="footer">Footer</div>