CSS: высота - заполняет отдых отделения?
я задаюсь вопросом, возможно ли это с простой CSS или если я должен использовать JavaScript для этого?
у меня есть боковая панель на моем веб-сайте. простой div#sidbar это обычно приблизительно 1024 пкс высотой, но высота изменяется динамично из-за, он доволен.
поэтому позвольте нам 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#rest заполнил остальную часть боковой панели, пока это не достигает нижней части div#sidebar.
действительно ли это возможно с чистой CSS?
2 ответа
Вам нужно что-то вроде 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';
};