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

Я пытаюсь создать раскладку из двух столбцов с помощью div. Мой размер левой колонки фиксирован до 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%. Также добавьте left: 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

http://reference.sitepoint.com/css/overflow переполнение уже не работает в Internet Explorer :( – penguru

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

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

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

источник

2010-08-17 13:48:39 jeroen

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

ответ

Смежные вопросы