如何将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％

回答

相关问题