Снова о растягивании по вертикали

Storm · October 26, 2007

День добрый.

Вопрос простой, но ответ найти не могу.

Необходимо только с применением сло?в реализовать следующее:

header страницы имееет фиксированую высоту, а sidebar и content должны

растягиваться по вертикали на вс? оставшееся пространство и упираться вниз окна.

Но у меня получается, что при присвоении этим блокам 100%-ной высоты они растягиваются

на всю высоту окна (что логично), и еще плюс высота header-a, в результате появляется вертикальный скролл.

Вот мой код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
html,body{margin:0;padding:0;height:100%;}
#main {width:700px;height:100%;margin:0 auto;}
#header {margin:0;height:100px;background: #EEE;}
#content {float:left;width:500px;height:100%;background:#19CAFF;}
#sidebar {float:left;width:200px;height:100%;background:#B9CAFF;}
#clear {clear:both;}
</style>
</head>
<body>
<div id="main">
 <div id="header">header</div>
 <div id="sidebar">sidebar</div>
 <div id="content">content</div> 
 <div id="clear"></div>
</div>
</body>
</html>

Подскажите, что не правильно.

maddogrts · October 26, 2007

header

fdddddddddВо-ddddf

gfffffffffddddddddddd

klierik · October 26, 2007

на самом деле тут все очень просто делаеться:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
html, body {
 margin:0;
 padding:0;
 height:100%;
}
#main {
 width:700px;
 height:100%;
 margin:0 auto;
}
#header {
 margin:0;
 height:100px;
 background: #EEE;
 position:relative
}
#content {
 float:left;
 width:500px;
 height:100%;
 background:#19CAFF;
/* padding-top:100px;*/
 margin-top:-100px;
}
#sidebar {
 float:left;
 width:200px;
 height:100%;
 background:#B9CAFF;
/* padding-top:100px;*/
 margin-top:-100px;
}
div.inner { margin-top:100px;}
#clear {
 clear:both;
}
</style>
</head>
<body>
<div id="main">
 <div id="header">header</div>
 <div id="sidebar">
 <div class="inner">sidebar</div>
 </div>
 <div id="content">
 <div class="inner">content</div>
 </div>
 <div id="clear"></div>
</div>
</body>
</html>

maddogrts · October 26, 2007

, klierik Один ноль

, Что то упустил из виду, такое простое решение

))))

klierik · October 26, 2007

рад был помочь

Storm · October 29, 2007

Только сегодня прочитал ответ. Большое спасибо, именно то, что я спрашивал.

klierik · November 14, 2007

вопрос по сабжу.

вот сижу что-то немогу сделать элементарный лейаут.

есть шапка, есть футер, есть контент.

все это занимает 100% окна.

контент занимает всю центральную область.

но в случае если контент превышает высоту области контента, то пусть появляется свой внутренний скролл.

это как-то мона сделать без js?

Sign In

Снова о растягивании по вертикали

Question

Storm

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

maddogrts

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

maddogrts

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Storm

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Обсуждения

Forums

Important Information