Я пытаюсь получить заголовок, липкий нижний колонтитул и секцию содержимого, которая охватывает среднее пространство на 100%. Однако у меня проблемы с средней высотой. Я включил код ниже и jsfiddles. Я использую HTML 4.0 строго в IE7 и не имею возможности изменить любой из них. Спасибо заранее!Липкий нижний колонтитул, заголовок и содержимое 100% высоты
jsfiddle без 100% высота: http://jsfiddle.net/hWRnZ/
jsfiddle с 100% Высота: http://jsfiddle.net/hWRnZ/1/
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head runat="server">
<title>DenApp</title>
<script type="text/javascript" src="javascript/jquery-1.7.1.min.js"></script>
<link rel="Stylesheet" href="./css/master.css" />
</head>
<body>
<div id="master_bodywrapper_div">
<div id="master_header_div">
<div id="master_logo_div">
<div id="master_logo_div_image">
<img id="master_logo_img" alt="logo" src="./images/DenApp_Logo.png" />
</div>
<div id="master_welcome_div">
<div id="master_welcome_div_inner">
Welcome SO-AND-SO!
</div>
</div>
</div>
<div id="master_tabs_div">
<div id="master_tabs_div_home" class="master_tabs">
Home
</div>
<div id="master_tabs_div_masterlist" class="master_tabs">
Full List
</div>
<div id="master_tabs_div_myworklists" class="master_tabs">
My Worklists
</div>
<div id="master_tabs_div_detail" class="master_tabs">
Detail
</div>
<div id="master_tabs_div_reporting" class="master_tabs">
Reporting
</div>
<div id="master_tabs_div_assignment" class="master_tabs">
Assignment
</div>
<div id="master_tabs_div_admin" class="master_tabs">
Admin
</div>
</div>
</div>
<div id="master_main_div">
<div id="master_content_div">
<div id="master_content_div_inner">
Hello World!
</div>
</div>
</div>
<div id="master_footer_div">
<div id="master_footer_div_
</div>
</div>
</body>
</html>
CSS
/*Main Styles*/
html, body
{
margin:0px;
padding:0px;
height:100%;
width:100%;
}
#master_bodywrapper_div
{
margin:0px;
padding:0px;
height:100%;
}
/*Header Styles*/
#master_header_div
{
position:absolute;
height:72px;
margin:0px;
padding:0px 0px 0px 0px;
left:0px;
top:0px;
width:100%;
}
#master_main_div
{
height:100%;
width:100%;
}
#master_logo_div
{
height:50px;
padding:0px 5px 0px 5px;
margin:0px;
}
#master_logo_div_image
{
padding:0px;
margin:0px;
position:relative;
float:left;
}
#master_logo_img
{
padding:0px;
margin:0px;
height:50px;
position:relative;
top:9px;
}
#master_welcome_div
{
padding:0px;
margin:0px;
position:relative;
float:right;
height:50px;
width:50%;
}
#master_welcome_div_inner
{
padding:0px;
margin:0px;
position:absolute;
bottom:0px;
right:0px;
}
#master_tabs_div
{
clear:both;
padding:2px 0px 0px 0px;
margin:0px;
height:22px;
}
.master_tabs
{
margin:0px 1px 0px 0px;
padding:1px 3px 1px 3px;
height:25px;
display:inline;
border:2px solid Black;
font-weight:bold;
background-color:#009799;
background-image:url(../images/blue_gradient_bottom.png);
background-position:bottom;
background-repeat:repeat-x;
}
.master_tabs:hover
{
background-image:url(../images/blue_gradient_top.png);
background-position:top;
cursor:pointer;
}
/*Content Styles*/
#master_content_div
{
padding-top:78px;
height:100%;
}
#master_content_div_inner
{
background-color:Blue;
height:100%;
}
/*Footer Styles*/
#master_footer_div
{
background-color:Purple;
height:20px;
position:relative;
margin-top:-20px;
clear:both;
}
Это вызывает проблему в центре. Нижняя часть, похоже, точно не устанавливает поля над нижним колонтитулом. Смотрите, это эта скрипка: http://jsfiddle.net/qRfe7/ – steventnorris
Как будто край поля не имеет никакого эффекта. – steventnorris
Проверьте это http://jsfiddle.net/qRfe7/4/ –