CSS: height - заполнить остальную часть div?

Интересно, возможно ли это с помощью простого css или если я должен использовать javascript для этого?

У меня есть боковая панель на моем сайте. простой div # sidbar обычно имеет значение 1024px, но высота изменяется динамически из-за его содержимого.

поэтому давайте изобразим следующий случай:

<div id="sidebar">
   <div class="widget"></div> //has a height of 100px
   <div class="widget"></div> //has a height of 100px
   <div id="rest"></div> //this div should have the rest height till to the bottom of the sidebar
</div>

Я хочу, чтобы div # rest заполнил остальную часть боковой панели, пока не достигнет нижней части боковой панели div #.

это возможно с чистым css?

Ответ 1

То, что вам нужно, это что-то вроде 100% - 200px, но CSS не поддерживает такие выражения. IE имеет нестандартную функцию "выражения", но если вы хотите, чтобы ваша страница работала во всех браузерах, я не вижу способа сделать это без JavaScript. В качестве альтернативы вы можете использовать все процентные высоты div, чтобы у вас было что-то вроде 10% -10% -80%.

Обновление: Вот простое решение с использованием JavaScript. Всякий раз, когда содержимое вашей боковой панели изменяется, просто вызовите эту функцию:

function resize() {
  // 200 is the total height of the other 2 divs
  var height = document.getElementById('sidebar').offsetHeight - 200;
  document.getElementById('rest').style.height = height + 'px';
};

Ответ 2

Если вы знаете точную высоту #widget (100px в вашем случае), вы можете избежать использования JavaScript с помощью абсолютного позиционирования:

#sidebar
{
height: 100%;
width: ...;
position: relative;
}

.widget
{
height: 100px;
}

#rest
{
position: absolute;
left: 0;
width: 100%;
top: 200px;
bottom: 0;
}

Ответ 3

Я столкнулся с этим вопросом, ища ответ на аналогичный вопрос, и я подумал, что проиллюстрирую calc. Начиная с этого сообщения, calc пока не поддерживается кросс-браузер; однако вы можете проверить эту ссылку здесь, чтобы узнать, поддерживаются ли ваши целевые браузеры. Я модифицировал матовый гипотетический случай, чтобы использовать calc в пример jsFiddle. По сути, это чистое решение CSS, которое делает то, что предлагает casablanca в своем ответе. Например, если браузер поддерживает calc, тогда height: calc(100% - 200px); будет действительным, а также для аналогичных свойств.

Ответ 4

Я предлагаю table-element в качестве альтернативы:

+: очистить CSS
+: избегать javascript
-: таблица семантически неправильно использована
-: не запрошенные элементы div

Ответ 5

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

<div style="width:100%">
  <div style="width:300px;background-color:#FFFF00;float:left">
  </div>
  <div style="margin-left:300px">
    <div style="position:relative;left:0px;width:100%;background-color:#00FFFF">
    </div>
  </div>
</div>

Ответ 6

Try

height: 100%;

или

height: auto;