0

私は次のものを持っています：

HTML

  <body>
    <div id="header"></div>
    <div id="logo"></div>
    <div id="container">
      <h1>Welcome message</h1>
      text text text text text text text text text text text text text text
    </div>
  </body>

CSS

html{
    background-color: #000000;
    color: white;
}

html,body, img{
    margin: 0;
    padding: 0;
    border: 0;
}

#header{
    position: absolute;
    left: 0;
    top: 0;
    background-color: yellow;
    width: 100%;
    height: 537px;
    z-index: -1;
}

div#logo{
    width: 385px;
    height: 141px;
    background: white;
    margin-left: auto;
    margin-right: auto;
}

#container{
    width: 964px;
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
    height: 100%;
    background-color: #000000;
    padding-left: 6px;
    padding-right: 6px;
}

一番下まで伸ばしたいdiv#containerのですが、そうではありません。

4

3 に答える 3

3

あなたもストレッチする必要がbodyありhtmlます：

html, body {
    height:100%;    
}

このフィドルを見てください。

于 2012-12-10T21:04:52.950 に答える
0 
html, body {
    height:100%;    
}

それはページ全体にまたがっているので、高さは賢明です。

于 2012-12-11T02:30:47.833 に答える
0

要素が100％の高さに達するには、要素に位置を適用する必要があります。

それで

#container{
    position: relative;
    height: 100%;
}

親に応じて、この要素の位置によってその高さが決まります。

この要素の親にポジショニングが適用されている場合、親の100％の高さになります。親以外の人がポジショニングを持っている場合は、本文を使用してページ全体に表示します。

于 2012-12-10T21:04:01.437 に答える