Добрый день. Начал верстать сайт и решил использовать блоки, а не таблицы, но сразу столкнулся с проблемой. Какая проблема? Когда я наполняю блок контента, то текст залезает на футер, если и контент написать ровно до футера, то при изменении масштаба браузера, контент всё равно лезет на футер (подвал). Пробовал задать проценты, а не фиксированное значение высоты, но тогда блоки меню и рекламы не окрашивались, тоесть обрезались взависимости от величины в них строк (думаю какждый с этим сталкивался),а мне нужно чтобы фон левого и правого блока опускался до футера и их размеры менялись от количества контента, тоесть чтобы средний блок мог растягиваться вниз, но при этом и тянул левый и правый блок. Фиксированная высота не подходит, ведь не всегда пишу равное количество символов. Второй день голову ломаю, что только не пробывал, подвал задевает текст. Как реализовать так, чтобы высота боковых блоков зависила от величины контента среднего блока? А то так не хочется снова верстать на таблицах, ведь та проблем нет, а хочу дивами.
Стили:
body
{
background-color:#FFFFC9;
color:#000000;
margin-left:auto;
margin-right:auto;
font-family:'Times New Roman', Times, serif;
font-size:12pt;
}
#kontent
{
height:1700px;
width:1000px;
background-color:#ffffff;
color:#000000;
margin:0px auto;
border-right:2px solid #EBEB97;
border-left:2px solid #EBEB97;
}
#menu
{
height:1700px;
width:200px;
background-color:#FFFFAB;
color:#000000;
float:left;
margin:0px auto;
border-right:2px solid #EBEB97;
}
#text
{
height:1690px;
width:586px;
background-color:#ffffff;
color:#000000;
float:left;
padding:5px;
overflow:auto;
}
#reklama
{
height:1700px;
width:200px;
background-color:#FFFFAB;
color:#000000;
float:right;
margin:0px auto;
border-left:2px solid #EBEB97;
}
#podval
{
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
height:50px;
width:1000px;
background-color:#FFDC83;
color:#000000;
margin:0px auto;
text-align:center;
padding-top:5px;
border:2px solid #EBEB97;
}
html:
<html>
<head>
</head>
<body>
<div id="kontent">
<div id="menu">
меню
</div>
<div id="text">
контент
</div>
<div id="reklama">
реклама
</div>
</div>
<div id="podval">
подвал
</div>
</body>
</html>
Xrusterik
18.12.2012 14:49
2 103
http://uld1.odnoklassniki.ru/getImage?photoId=503381319168&photoType=0
Задал высоту html тоесть браузера в 100% (html:{height:100%;}) и очистил браузерные элементы (* {margin:0; padding:0;})
Сделал большой основной блок высотой 100%, в нём раместил все остальные блоки используя float, где нужно чистил c помощью clear. Всё убралось в одном главном блоке, хотя у меня и есть в шапке изображение разбитое на 7 частей. Теперь я задаю фон главному блоку, который совпадает у меня с цветом боковых блоков. Для всех блоков(центральный и 2 боковых) задаю высоту min-height:100%; блоки раздвинуль в высоту но не до низу, но тут и срабатывает фон главного блока, который всё таки и заливает не восполненную часть нужным мне цветом. Вуаля, всё получилось, футер не сьезжает, текст на него не заезжает при любом масштабировании браузера. 2 дня голову ломал, а оказалось всё так просто)