Question

我觉得我不应该问这么简单的问题，但我找不到任何简单的答案。

我有一个可以是任何高度的标题。它下面的内容需要填满页面上的剩余空间（两者都包含在必要的容器div中）。如何通过HTML和CSS实现这一目标？我会考虑使用JavaScript，但是我希望在添加内容时调整大小，或者调整窗口大小等等。

HTML code：

<div id="container" >

    <div id="header" >
      <br/>
      <br/>
      ...variable content in the header (not necessarily text)...
      <br/>
      <br/>
    </div>

    <div id="content"></div>

</div>

CSS代码：

#container
{
  background-color:blue; 
  width:100%; 
  height:100%;
}

#header
{
  background-color:green;
  width:100%; 
  height:auto;
}

#content
{
  background-color:red; 
  width:100%;
  height:100px; /*The height here needs to fill the remaining space in the container div*/
}

Answer 1

我认为这可能有助于您做您想做的事：http://jsfiddle.net/AGLDV/3/

html, body {
  height:100%;
}

#container {
  width:100%;
  height:100%;
  background:#ccc;
  display:table;
}

#header {
  height:1%;
  width:100%;
  background:blue;
  display:table-row;
}

#content {
  width:100%;
  background:red;
  display:table-row;
}

Answer 2

Fiddle

我将标题高度设置为height: auto;，然后将overflow: hidden;添加到body, html样式。

只需在标题中添加任何文字或<br />，高度就会改变。

使内容<div>使用可变高度标题</div>填充容器

2 个答案:

Fiddle