如何將div寬度設置爲100％

我試圖設計一個使用div的2列布局。我的左列大小固定爲150 px。但是右列並不是固定的大小，所以我想讓它延伸到瀏覽器的右邊界。我在右列中使用了width:auto和width:100%值，但它們不起作用。如何將div寬度設置爲100％

CSS：

html { 
    height:100%; width:100% 
} 
body { 
    color: #000040; 
    text-align: left; 
    padding:0; 
    margin:0; 
    height:100%; 
    width:100% 
} 
#header { 
    position:relative; 
    float:left; 
    background-color: #000053; 
    width: 100%; 
    height: 76px 
} 
#wrapper { 
    position:relative; 
    overflow:hidden; 
    width:100%; 
    height: 100%; 
    margin:0px auto; 
    padding:0; 
    background-color:Aqua 
} 
#container { 
    clear:left; 
    float:left; 
    overflow:hidden; 
    width:100%; 
    height:100% 
} 
#left_column { 
    position: relative; 
    float: left; 
    background-color:Fuchsia; 
    width: 150px; 
    overflow:hidden; 
    height:100% 
} 
#right_column { 
    position: relative; 
    float:left; 
    overflow:hidden; 
    background-color:Blue; 
    height: 100%; 
    width:auto }

HTML

<html> 
    <body> 
     <div id="wrapper"> 
      <div id="header"> 
       HEADER 
      </div> 
      <div id="container"> 
       <div id="left_column"> 
        LEFT COLUMN 
       </div> 
       <div id="right_column"> 
        RIGHT COLUMN 
       </div> 
      </div> 
     </div> 
    </body> 

</html>

來源

2010-08-17 penguru

變化爲在div right_column從相對於固定的位置，並從寬度自動至100％。另外加左：150px; 有了這些改變，你的CSS right_column將如下所示：

#right_column { 
     position: fixed; 
     left:150px; 
     float:left; 
     overflow:hidden; 
     background-color:Blue; 
     height: 100%; 
     width:100%; }

您可以點擊此處查看http://jsbin.com/ejetu3

來源

2010-08-17 11:34:24 Sotiris

它運行良好，但它有滾動問題。我試圖刪除溢出隱藏標籤，以查看頁面需要滾動時發生的情況。當我向下滾動頁面時，右列不會向下滾動。 – penguru 2010-08-17 11:59:17

http://reference.sitepoint.com/css/overflow 溢出在Internet Explorer中已經是越野車:( – penguru 2010-08-17 12:06:30

我會刪除所有position語句，只放一個float:left左欄，不正確的也不是容器。給右欄一個margin-left:150px，它應該很好。

除了左浮動列外，還可以從其餘部分刪除width:100%語句;當它們不漂浮時，它們會自動變爲100％。

overflow:hidden只在包裝上需要;至少如果你正在使用它來讓div的高度增長以適應其中的浮動物。

來源

2010-08-17 13:48:39 jeroen

如何將div寬度設置爲100％

回答

相關問題