CSS HTML-DIV заполняет оставшееся пространство

Ответ 1

Вы можете сделать что-то безумное, отказаться от javascript и не совсем готового к прайму времени CSS3 и использовать абсолютное позиционирование.

Смотрите этот jsfiddle. Бонусные баллы за хорошее поведение в браузере тоже.

#col_1 {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100px;
  background-color: #eee;
}
#col_2 {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 150px;
  left: 100px;
  background-color: #ccd;
}
#col_3 {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 250px;
  right: 0px;
  background-color: #cdc;
}

<div id='col_1'>Column 1</div>
<div id='col_2'>Column 2</div>
<div id='col_3'>
  Column 3
</div>

Ответ 2

Для этого необходим Javascript. Если вы хотите, чтобы все 3 divs заполнили пространство окна (100%), вам нужно использовать javascript, чтобы определить, сколько места осталось, и соответственно назначить высоту col_3. С помощью jQuery вы можете сделать

var one = $('#col_1').height(),
two = $('#col_2').height(), 
remaining_height = parseInt($(window).height() - one - two); 
$('#col_3').height(remaining_height); 

Ответ 3

Вы уже приняли ответ, но вы можете проверить CSS Flexbox, который предназначен для решения этой точной проблемы, не полагаясь на взломы "float: left". Он работает на Chrome, Safari и FF (с префиксами -webkit и -moz). Не в IE еще.

Вот несколько быстрых ссылок:

http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm

http://www.w3.org/TR/css3-flexbox/

Ответ 4

Вам нужен контекст форматирования блока:

#c1,#c2 {
    background-color: red;
    float: left;
    width: 200px;
}
#c2 {
    background-color: green;
}
#c3 {
    background-color: yellow;
    height: 40px;
    overflow: auto;
}

это переполнение, которое заставляет его работать. Дополнительная информация: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Ответ 5

Вот что я подумал об использовании только CSS. Я тестировал его в FF12, GC18, SAF5.1 и IE 7,8,9,9CV.

.Clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.Clearfix {
  display: inline-block;
}
html[xmlns] .Clearfix {
  display: block;
}
* html .Clearfix {
  height: 1%;
}
#Wrapper {
  background-color: #FC20C9;
}
#col_1 {
  float: left;
  width: 150px;
  background-color: #FF0000;
}
#col_2 {
  float: left;
  width: 100px;
  background-color: #00CC00;
}
#col_3 {
  width: auto;
  float: none;
  background-color: #0066FF;
  overflow: hidden;
}

<div id="Wrapper" class="Clearfix">
  <div id="col_1">Lorem ipsum</div>
  <div id="col_2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <div id="col_3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
enter code here

Ответ 6

Либо используя jQuery для вычисления оставшегося пространства, либо используйте гибкое поле css3, чтобы заполнить оставшееся пространство:

http://www.html5rocks.com/tutorials/flexbox/quick/

diagram2 - это тот случай, который вы хотите - последний поле с максимальным "box-flex" займет оставшееся пространство (по умолчанию box-flex равен 0)

Ответ 7

Если вы настроили таргетинг на самые последние браузеры, вы можете использовать функцию HTML5 calc

#col_3 {
  width: calc(100%-(100px+150px));
}
#red {
  border: 1px solid goldenrod;
}
div {
  border: 1px solid;
}

<div id="red">
  <div id="col_1" style="width:150px; float:left;">1</div>
  <div id="col_2" style="width:100px; float:left;">2</div>
  <div id="col_3">3</div>
</div>

Ответ 8

снимите ширину, и она должна расширяться, чтобы заполнить все. поместите ширину: 100%, если хотите. вы должны проверить плагин firebug для firefox.

Ответ 9

Поместите все три div в контейнер, дайте col 1 и 2 фиксированную ширину и установите 3-е значение в auto.