Проблема с div height=100%
Есть страница в ней есть 1 основной div в котором находятся 3 дива колонками, у всех трёх стоит float:left и width. Для body и html заданы height:100% doctype
Пытаюсь поставить любому из дивов height:100% и они лезут не на всю высоту страницы, а вылазят за пределы родительского дива и создают вертикальную прокрутку, в то время когда страница почти пустая.
Как правильно сверстать эти дивы, чтобы они тянулись на всю высоту сколько можно максимум, но не вылазили за пределы и не создавали прокрутки?
Есть страница в ней есть 1 основной div в котором находятся 3 дива колонками, у всех трёх стоит float:left и width. Для body и html заданы height:100% doctype
Пытаюсь поставить любому из дивов height:100% и они лезут не на всю высоту страницы, а вылазят за пределы родительского дива и создают вертикальную прокрутку, в то время когда страница почти пустая.
Как правильно сверстать эти дивы, чтобы они тянулись на всю высоту сколько можно максимум, но не вылазили за пределы и не создавали прокрутки?
Возможно у вашего body не задан margin:0px;
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Test</title>
<style type="text/css">
body {
margin: 0px;
height:100%;
}
html {
height:100%;
}
#div1 {
float:left;
width: 20%;
height:100%;
background:#3366CC;
}
#div2 {
float:left;
width:60%;
height:100%;
background:#999999;
}
#div3 {
float:left;
width: 20%;
height:100%;
background:#66FF66;
}
</style></head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
[/HTML]
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Test</title>
<style type="text/css">
body {
margin: 0px;
height:100%;
}
html {
height:100%;
}
#div1 {
float:left;
width: 20%;
height:100%;
background:#3366CC;
}
#div2 {
float:left;
width:60%;
height:100%;
background:#999999;
}
#div3 {
float:left;
width: 20%;
height:100%;
background:#66FF66;
}
</style></head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
[/HTML]
О! Спасибо! Это работает. Но только всё выравнено по левому краю, если задать не в процентах ширину, а в пикселях для каждого дива... Можно как-то по центру выравнять? Попробовал засунуть это в 1 div и ему сделать ширину 100% и text-align:center, так всё поплыло...
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Test</title>
<style type="text/css">
<!--
body {
margin: 0;
height:100%;
}
html {
height:100%;
}
#div1 {
float:left;
width: 100px;
height:100%;
background:#3366CC;
}
#div2 {
float:left;
width:300px;
height:100%;
background:#999999;
}
#div3 {
float:left;
width: 150px;
height:100%;
background:#66FF66;
}
-->
</style></head>
<body>
<div align="center" style="height:100%;">
<div style="height:100%;width:550px;" nowrap>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
</div>
</body>
</html>
[/HTML]
Но вообще, читай http://htmlbook.ru
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Test</title>
<style type="text/css">
<!--
body {
margin: 0;
height:100%;
}
html {
height:100%;
}
#div1 {
float:left;
width: 100px;
height:100%;
background:#3366CC;
}
#div2 {
float:left;
width:300px;
height:100%;
background:#999999;
}
#div3 {
float:left;
width: 150px;
height:100%;
background:#66FF66;
}
-->
</style></head>
<body>
<div align="center" style="height:100%;">
<div style="height:100%;width:550px;" nowrap>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
</div>
</body>
</html>
[/HTML]
Но вообще, читай http://htmlbook.ru
Так оно выглядит нормально, но когда на странице много текста и надо див тянуть, то центральный див тянется вниз, а всё остальное остаётся на месте и налазит на фон снизу, но если главному диву убрать height:100%, то всё тянется нормально, но зато у блоков пропадает heigth:100%... Возможно вообще нормально дивами сверстать сайт или только таблицами?
Ну как бы я знаю как она называется) Не первый год в вебе. Как сделать высоту блоков правильной, вот в чём вопрос?
http://www.getincss.ru/2009/07/11/4-sposoba-kak-sozdat-bloki-kolonki-odinakovoj-vysoty/
Выбирай любой способ