Question

我正在尝试使用div设计2列布局。我的左栏大小固定为150 px。但右列不是固定大小，所以我希望它扩展到浏览器的右边界。我在右栏中使用了width:auto和width: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>

Answer 1

我会删除所有position语句，只在左栏中放置float:left，而不是右侧和容器。给正确的列margin-left:150px，它应该可以正常工作。

除了左浮动列，您还可以从其余列中删除width:100%语句;当它们没有浮动时，它们将自动100％宽。

仅在包装器上需要overflow:hidden;至少如果你使用它来div增加高度来容纳里面的花车。

Answer 2

将div右列更改为相对于固定的位置，将宽度从auto更改为100％。还要加左：150px; 通过这些更改，您对right_column的css将如下所示：

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

你可以在这里查看http://jsbin.com/ejetu3

如何将div宽度设置为100％

2 个答案: