Я создаю веб-страницу из 3 столбцов (заголовок и строка меню над левой навигационной панелью, основной областью и правой боковой панелью с нижним колонтитулом на всю ширину внизу). У меня есть цвета фона для каждого столбца, но они обрезаются в конце текста вместо заполнения всего столбца. Есть ли способ заполнить весь столбец, который не зависит от таблицы (td)?
Вот мой CSS для общего макета:
#container
{
float: left;
width: 100%; /* IE doubles the margins on floats, this takes care of the problem */
display: inline; /* this is where Ryan Brill (author of the ALA's article) and I go in "opposite directions" */
margin-left: -200px;
}
#left
{
float: left;
width: 180px; /* IE doubles the margins on floats, this takes care of the problem */
display: inline;
margin-left: 200px;
padding: 0px 0px 0px 5px;
background: url('/App_Themes/Default/images/RightColumnBackground.png') repeat left top;
}
#main
{
/* the width from #left (180px) + the negative margin from #container (200px) */
margin-left: 380px;
padding: 0px 0px 0px 5px;
}
#sidebar
{
/* this is to keep the content of #sidebar to the right of #main even if the content of "main is shorter */
padding-left: 100%; /* this is to "bring back" the #sidebar that has been moved out of the viewport because of the padding value */
margin-left: -220px;
}
Я знаю, что могу установить высоту в стиле, но это привязывает высоту к определенному количеству пикселей. Есть ли вариант типа height: fill;
?