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

Question

Итак, у меня есть такой макет:

div {
  border: 1px solid
}

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

col_1 и col_2 занимают фиксированное количество места.Я хочу, чтобы третий столбец занял все остальное.Каков наилучший способ сделать это?

Answer 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>

Answer 2

Для этого необходим Javascript. Если вы хотите, чтобы все 3 делителя заполняли пространство окна (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); 

Answer 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/

Answer 4

Вот кое-что, что я думал об использовании только 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

Answer 5

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

#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

Answer 6

Если вы ориентируетесь на самые последние браузеры, вы можете использовать функцию 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>

Answer 7

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

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

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

Answer 8

Поместите все три элемента в контейнер, задайте фиксированную ширину столбцов 1 и 2 и установите для 3-го значения значение auto.

Answer 9

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