Как установить ширину div на 100% - PullRequest
Новая
       7

Как установить ширину div на 100%

0 голосов
/ 17 августа 2010

Я пытаюсь спроектировать макет с двумя столбцами, используя div. Размер моего левого столбца установлен на 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>

Ответы [ 2 ]

4 голосов
/ 17 августа 2010

Я бы удалил все операторы position и поставил бы float:left только в левой колонке, а не в правой или в контейнере.Задайте для правого столбца значение margin-left:150px, и оно должно работать нормально.

Кроме столбца с плавающей запятой слева, вы также можете удалить операторы width:100% из остальных;когда они не плавают, они автоматически будут иметь ширину 100%.

overflow:hidden требуется только для оболочки;по крайней мере, если вы используете его для увеличения высоты div для размещения поплавков внутри него.

1 голос
/ 17 августа 2010

изменить для 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...