如何将div宽度设置为100％

Question

I'm trying to design a 2 column layout using divs. 我正在尝试使用div设计2列布局。 My left column size is fixed to 150 px . 我的左列大小固定为150 px 。 But right column is not fixed size, so I want it to extend to right boundary of the browser. 但是右列的大小不是固定的，因此我希望它扩展到浏览器的右边界。 I used width:auto and width:100% values in right column but they didn't work. 我在右栏中使用了width:auto和width:100%值，但是它们没有用。

CSS : 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

<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

I would remove all position statements and only put a float:left on the left column, not the right nor the container. 我将删除所有position语句，只将float:left放在左列上，而不是right或容器上。 Give the right column a margin-left:150px and it should work fine. 给右边的列margin-left:150px一个margin-left:150px ，它应该可以正常工作。

Except for the left-floated column, you can also remove the width:100% statements from the rest; 除了左浮动列外，您还可以从其余部分中删除width:100%语句； when they're not floated, they'll be 100% wide automatically. 当它们不漂浮时，它们会自动100％宽。

The overflow:hidden is only needed on the wrapper; 只在包装器上需要overflow:hidden ； at least if you are using it to have the div grow in height to accommodate the floats inside it. 至少如果您使用它来使div的高度增加以容纳其中的浮子。

Answer 2

change for the div right_column the position from relative to fixed, and width from auto to 100%. 将div right_column的位置从相对更改为固定，将宽度从auto更改为100％。 Also add left:150px; 还要加上left：150px; With these changes you css for right_column will look like the following: 进行了这些更改后，您的right_column的css将如下所示：

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

you can check it here http://jsbin.com/ejetu3 您可以在这里检查它http://jsbin.com/ejetu3

如何将div宽度设置为100％

问题描述

2 个解决方案

解决方案1
4 2010-08-17 13:48:39

解决方案2
1 2010-08-17 11:34:24

如何将div宽度设置为100％

问题描述

2 个解决方案

解决方案1 4 2010-08-17 13:48:39

解决方案2 1 2010-08-17 11:34:24

解决方案1
4 2010-08-17 13:48:39

解决方案2
1 2010-08-17 11:34:24