it-swarm.com.ru

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

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

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 занимают фиксированное количество места. Я хочу, чтобы третий столбец занял все остальное. Каков наилучший способ сделать это?

20
Andy Hin

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

27
FMM

Для этого нужен 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); 
9
Hussein

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

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

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

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

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

4
selbie

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

#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

2
rikkertkoppes

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

2
INSURRECTION1ST

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

0
Ruslan López

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

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

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

0
vincicat