Как растянуть блок на оставшуюся высоту экрана?

Razor · June 19, 2009

Допустим у нас заполнена половина экрана блоком с известной высотой, второй блок (под ним) должен растягиваться до конца экрана.

Вот, хотяб приблезительно как сделать можно?)

Edited June 19, 2009 by Razor

Игорь Ермаков · June 19, 2009

<div style="width:100%;">второй блок</div>

Вот тебе пример, делал за минуту, так что без критики про доктайпы и отступы и бла-ла-бла:

<html>
<body>
<div style="width:50%; background:#000; height:50%;"></div>
<div style="width:100%; background:#ccc; height:50%;">

</body>
</html>

А или тебе не по ширине, прости ступил, сейчас сделаю.

вот держи, если у кого будут предложения по рациональние с меньшим кол-вом блоков, пишите интересно.

<html>
<body>

<div style="width:50%; background:#ccc; height:100%;">
<div style="width:100%; background:#666; height:300px;">
блок в котором будет ещё чё-нить
</div>
<div>Блок в котором будет всё остальное распологаться</div>
</div>

</body>
</html>

SelenIT · June 19, 2009

Как вариант:

<!DOCTYPE html>
<style type="text/css">
* { padding: 0; margin: 0; }
html, body, .article { height: 100%; }
.header { height: 100px; background: #ffc; position: absolute; width: 100%; }
.article { background: #cfc; }
.article h1 { padding-top: 100px; }
</style>
<div class="header">Фиксированной высоты шапка</div>
<div class="article">
	<h1>Вот... :)</h1>
	<p>Основной блок с контентом</p>
</div>

Razor · June 19, 2009

Спасибо большое )

Sign In

Как растянуть блок на оставшуюся высоту экрана?

Question

Razor

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Игорь Ермаков

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Razor

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information