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%;    
}

看看这个Fiddle。

于 2012-12-10T21:04:52.950 回答
0

为了让元素达到 100% 的高度，它们需要应用一个位置。

所以

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

根据父元素的定位将决定它的高度。

如果此元素父级应用了定位，它将成为其父级的 100% 高度。如果没有它的父母有定位，它将使用正文并显示在整个页面上。

于 2012-12-10T21:04:01.437 回答
0 
html, body {
    height:100%;    
}

因为它跨越整个页面，所以高度明智。

于 2012-12-11T02:30:47.833 回答