2009-11-19 209 views
3

我有一個網站的問題,我放在一起。我有一個簡單的div佈局。主要內容如下:CSS父DIV溢出

<body> 
    <div id="Container"> 
     <div id="Logo"></div> 

     <div id="Banner"> 
      <div id="Nav"></div> 
     </div> 
     <div id="Content"> 
     </div> 

     <div id="footer">Footer</div> 
    </div> 
</body>​ 

我的CSS如下:

@charset "utf-8"; 
/* CSS Document */ 


html, body { 
    height:100%; 
    padding:0; 
    margin:0; 
    background-image:url(../layout.img/background_gradient.gif); 
    background-repeat:repeat-x; 
} 

#Container { 
    height:100%; 
    width:950px; 
    margin:auto; 

    background-color:#FFFFFF; 
    border-left:1px solid #333333; 
    border-right:1px solid #333333; 
} 

#Logo { 
    width:160px; 
    height:160px; 
    float:right; 
} 

#Banner { 
    width:100%; 
    height:160px; 
} 

#Nav { 
    width:550px; 
    height:33px; 
    position:relative; 
    top:100px; 
    left:50px; 
} 

#Content { 
    clear:both; 
} 

最後的結果可以在這裏看到:

http://jsfiddle.net/mczMS/

正如你可以看到'容器'的div沒有伸展與內容,當你向下滾動頁。我知道這可能是愚蠢簡單的事情,但我今天缺乏腦力。哈哈。

回答

8

嘗試增加:

#container { min-height: 100%; } 

高100%。您也可以嘗試:

#container { overflow: auto; } 
+0

不錯!工作很好。感謝那! – Ben

4

如果從容器中移除高度:100%,它將拉伸以適合其內容。

+0

但是,如果高度低於全高,我認爲高度是100%。 – cletus