Растяжка на 100%

baron27 · 26.04.2006, 16:15

Привет!
Есть 3 дива фиксированной ширины.

верхний и нижний - фиксированной высоты, так они содержат в себе картинки - границы с закругленными углами.
средний див - собственно контент. так вот этот див надо растянуть по всей оставшейся ширине страницы, то есть 100%-2 высоты верхних и нижних дивов.

Код:

html, body{background-color:#000000; height:100%; margin:0; padding:0; text-align:center;}

#topbg{ width:567px;  height:17px; background:transparent url(topbg.gif) no-repeat left bottom; } 

#content{width:567px; background-color:#FFFFFF;  height:100%; padding-bottom:17px; padding-top:17px;}

#botbg{width:567px;height: 17px; background:transparent url(botbg.gif) no-repeat left top;}

данный код растягивает конент на все 100%, но как учесть верхние и нижние дивы?

etc · 26.04.2006, 17:28

вложи их в div2 и сделай div4 по центру... возможно, будет работать.

baron27 · 26.04.2006, 19:18

нифига(

KidsKilla · 26.04.2006, 22:33

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
*{margin:0;padding:0;}
HTML,BODY{height:100%;}
#head{position:absolute;top:0;left:0;width:100%;height:50px;background:#eee;}
#foot{height:30px;background:#eee;}
#cont{height:100%;margin-bottom:-30px;}
#cont-pad{margin:50px 0 30px;padding:1em;border:1px solid lightblue;}
</style>

</head>
<body>
<div id="cont"><div id="cont-pad">
 Некомпетентный почтовый маркетинг ведет к потере будущих клиентов
Даже такую мелочь, как рекламный емейл, надо составлять с умом и расчетом. В противном случае эта мелочь может отразиться на количестве ваших будущих клиентов. (2005.12.24)
Все статьи раздела Реклама и продвижение »
Один миллиард пользователей Интернетом
Интернет прирастает в среднем на 18% в год и сейчас охватывает один миллиард пользователей. Второй миллиард пользователей последует в ближайшие десять лет, что приведет к колоссальным изменениям в юзабилити. (2005.12.22)
Все статьи раздела Тестирование »
</div></div>
<div id="head">верх</div>
<div id="foot">низ</div>

</body>
</html>

baron27 · 26.04.2006, 23:45

в фаерфоксе:
1. футер уезжал за страницу
2. при количестве текста больше высоты страницы, футер остается на месте, а текст проходит под ним
первое я кое-как исправил, а второе никак не врублюсь...

Код:

<style type="text/css">
*{margin:0;padding:0;}
HTML,BODY{height:100%;}
#head{position:absolute;top:0;left:0;width:100%;height:50px;background:#f00;}
#cont-pad{margin:50px 0 30px;padding:1em;border:1px solid lightblue;}
</style>

<!--[if IE]> 
<style type="text/css">
#cont{height:100%;margin-bottom:-30px;} 
#foot{height:30px;background:#eee;}
</style>
<![endif]-->

<comment>
<style type="text/css">
	#cont{height:100%;margin-bottom:-30px; margin-top:-50px; padding-top:50px;}
	#foot{height:30px;background:#eee; position:relative; bottom:0;}
</style>
</comment>

KidsKilla · 27.04.2006, 00:27

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
*{margin:0;padding:0;}
HTML,BODY{height:100%;}
#head{position:absolute;top:0;left:0;width:100%;height:100px;background:#eee;}
#foot{height:30px;background:#eee;}
#cont{height:100%;position:relative;margin:0 0 -30px;}
HTML>BODY #cont{min-height:100%;height:auto;}
#cont-pad{padding:120px 1em 50px;border:1px solid lightblue;}
</style>

</head>
<body>
<div id="cont"><div id="cont-pad">
<p> Некомпетентный почтовый маркетинг ведет к потере будущих клиентов
Даже такую мелочь, как рекламный емейл, надо составлять с умом и расчетом. В противном случае эта мелочь может отразиться на количестве ваших будущих клиентов. (2005.12.24)
Все статьи раздела Реклама и продвижение »
Один миллиард пользователей Интернетом
Интернет прирастает в среднем на 18% в год и сейчас охватывает один миллиард пользователей. Второй миллиард пользователей последует в ближайшие десять лет, что приведет к колоссальным изменениям в юзабилити. (2005.12.22)
Все статьи раздела Тестирование »
</p>
</div></div>
<div id="head">#head</div>
<div id="foot">#foot</div>

</body>
</html>

мой косяк был =)