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

Question

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

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

так давайте imaginge следующий случай:

<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 # остальное, чтобы заполнить остальную часть боковой панели, пока она не достигнет дна DIV # боковой панели.

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

Answer 1

То, что вы хотите что-то вроде 100% - 200px но CSS не поддерживает такие выражения, как эти. IE имеет нестандартную функцию «выражения», но если вы хотите, чтобы ваша страница работала во всех браузерах, я не вижу способа сделать это без JavaScript. В качестве альтернативы вы можете сделать все процентные высоты использования div s, чтобы вы могли иметь что-то вроде 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'; 
}; 

Answer 2

Попробуйте

height: 100%; 

или

height: auto; 

Answer 3

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

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

.widget 
{ 
height: 100px; 
} 

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

Answer 4

вы можете сделать это с помощью вложенных тегов 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> 

Answer 5

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

Answer 6

Я предлагаю таблицу-элемент в качестве альтернативы:

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