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全部延伸到底部，但事实并非如此。

Answer 1

您还需要延长body和html：

html, body {
    height:100%;    
}

看看这个Fiddle。

Answer 2

为了让元素达到100％的高度，他们需要有一个位置。

所以

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

根据父母的定位，这个元素将决定它的高度。

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

Answer 3

html, body {
    height:100%;    
}

因为它横跨整个页面，然后是高度。

DIV高度达到100％

HTML

CSS

3 个答案: