0

こんなに簡単な質問をするべきではないような気がしますが、そこには簡単な答えが見つかりません。

任意の高さにすることができるヘッダーがあります。その下のコンテンツは、ページの残りのスペースを埋める必要があります（両方とも必要なコンテナーdivに含まれています）。これはHTMLとCSSでどのように達成できますか？JavaScriptを検討しますが、コンテンツが追加されたとき、またはウィンドウのサイズが変更されたときなどに、サイズ変更が自動的に行われるようにしたいです。

HTMLコード：

<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*/
}
4

2 に答える 2

3

これはあなたがやりたいことをするのに役立つかもしれないと思います: 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;
}
于 2013-01-11T10:30:04.387 に答える
0

フィドル

ヘッダーの高さを に設定してから、スタイルheight: auto;に追加しました。overflow: hidden;body, html

テキストまたは<br />ヘッダーに追加するだけで、高さが変わります。

于 2013-01-11T10:44:02.243 に答える