Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Div height 100%


Автор: Рыжий 12.7.2007, 18:39
Не нашел в поиске (да да...)

Есть страница, ее код:

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
  <title></title>
<style type='text/css'>
body{
font-family:Verdana;
background: #FFFFFF url(fon.gif) repeat-x scroll 0%;
background-position:top left;
margin:0;
position:relative;
}
#main{
    background: #0d8abe url(menu_fon.gif) repeat-x scroll 0% ;
    width:950px;
    height:88px;
    float:center;
    position:relative;
    text-align:center;
    margin: 0 auto 0;
}
#main_menu{
    background: #0d8abe url(menu1.gif) repeat-x scroll 0% ;
    width:950px;
    height:28px;
    float:center;
    text-align:center;
    font-size:13px;
    position:relative;
    color: #FFFFFF;
    margin: 0 auto 0;
}

.content{
    width:950px;
    height:100%;
    font-size:12px;
    background:red;
    position:relative;
    margin: 0 auto 0;
}
</style>
</head>
<body>
<div id='main'>
<div style='position:relative;float:left;'></div>
</div>
<div class='content'>
 <div style='margin-left:50px;'>
     ПРИВЕТ!
</div>
</div>

<br /><br />
<div style='width:950px;margin:0 auto 0;'>
<div style='margin-left:20px;font-size:11px;color:#115276;'>&copy;2007 Submetech. All rights reserved</div>
</div><br />
</body>
</html>


Мне нужно Div с красным фоном (content) растянуть до конца, но так, чтобы Copyright еще поместился (то есть как margin-bottom:50px;) Но и это не помогает ( 
Если убрать Doctype - все отлично. Но я этот doctype уже на всех страницах поставил.... не хотелось бы пересматривать все заново (
Большое спасибо заранее )

Автор: SelenIT 12.7.2007, 18:46
Рыжий, в стандартном режиме высота body определяется контентом. Для ее "растяжки" нужно
Код

html, body { height: 100%; }

Автор: Рыжий 12.7.2007, 19:33
я в шоке... smile 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)