展开页面设置html和css

【问题标题】：Expand page set html and css展开页面设置html和css
【发布时间】：2014-12-11 04:22:51
【问题描述】：

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

内容 div 将根据正在写入的 cmets 的数量进行扩展。如何设置内容 div 的 css/html，以便当更多数量的 cmets（例如：- 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%
}

【问题讨论】：

请提供您想要达到的目标的图片或视频。
不要在您的内容元素上定义高度，以便它会根据其内部元素的内容自动扩展。另外，如果你想详细一点，你可以设置height: auto;。

标签： html css

【解决方案1】：

将content的高度样式改为min-height：

function addContent() {
  var content= document.getElementById('content');
  content.innerHTML = content.innerHTML+'testing &hellip; ';
  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>

【讨论】：