У меня есть следующий HTML-код для построения центрированной страницы шириной 900 пикселей с заголовком, нижним колонтитулом и разделом содержимого:
<body>
<div id="mainMaster">
<div id="main">
<form runat="server">
<div id="header">
</div>
<div id="content">
</div>
</form>
</div>
</div>
<div id="footer">
</div>
</body>
Макет оформлен с использованием следующего (приблизительно) CSS:
html, body
{
height: 100%;
}
#mainMaster
{
min-height: 100%;
background: url(../Images/Background.png);
}
#main
{
width: 930px;
margin: 0 auto;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#header
{
}
#footer
{
background-image:none;
background-color:White;
position: relative;
margin-top: -80px; /* negative value of footer height */
margin-left: auto;
margin-right: auto;
width: 930px;
height: 80px;
clear: both;
}
#content
{
position:relative;
overflow:hidden;
height:100%;
background-image:none;
background-color:White;
}
Первоначально CSS был основан на макете, который я нашел в интернете для «липких нижних колонтитулов».Он отлично работал с липким нижним колонтитулом, но потом я столкнулся с такими проблемами:
1) «Контент» никогда не растягивается до полного размера.Это большая проблема на некоторых моих страницах, потому что внутренний контроль установлен на 100%.Поскольку содержимое не растягивается, элементы управления отображаются полностью сжатыми.
2) Я только что добавил фоновое изображение и цвет.Этот фон не должен отображаться на средних панелях содержимого.Поскольку «содержимое» не полностью растянуто, я получаю фоновое изображение, отображаемое в неправильных местах.
Я предпочитаю только CSS исправить это (т.е. без хаков или JS).Любая помощь?