Получилось такое:
| Код |
<body dir="ltr">
<div id="container">
<div id="headerDiv"><img
src="http://localhost/fluortech/skins/default/images//logo.png" /></div>
<div id="topMenuBarDiv">.</div>
<div id="bodyDiv">
<p>qq</p>
</div>
<div id="footerDiv">.</div>
</div>
</body>
|
| Код |
@CHARSET "UTF-8";
/*=====MAIN TEMPLATES=====I*/
html,
body {
margin:0;
padding:0;
height:100%;
}
body {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
color:#2B3637;
background-color:#FFF;
background-image:url(../images/bg.png);
text-align: center;
height: 100%;
}
img {
border:0px;
padding: 0px;
margin: 0px;
}
table {
border-collapse:collapse;
border:0px;
padding:0px 0px 0px 0px;
}
td {
font:normal 11px Tahoma, Arial;
vertical-align: middle;
line-height:16px;
padding:0px 0px 0px 0px;
}
input, textarea, select {
font:normal 11px Tahoma;
padding:2px 0px 2px 0px;
margin:2px 0px 2px 0px;
vertical-align:top;
}
div {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
p {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
/* =====MAIN====== */
#container {
width: 905px;
min-height:100%;
height:100%;
position:relative;
margin-left: auto;
margin-right: auto;
}
#headerDiv {
width: 100%;
height: 100px;
text-align: left;
background-image: url(../images/headerBg.png);
background-repeat: no-repeat;
background-position: left top;
}
#topMenuBarDiv {
width: 100%;
height: 39px;
text-align: center;
background-image: url(../images/topMenuBar.png);
background-position: top left;
background-repeat: no-repeat;
color: transparent;
}
#bodyDiv {
width: 100%;
height: inherit;
padding: 0px;
margin-bottom: -46px;
background-image: url(../images/bodyBg.png);
background-position: top left;
background-repeat: repeat-y;
}
#footerDiv {
position:relative;
bottom:0;
width:100%;
height:46px;
background-image: url(../images/footerBg.png);
background-position: top left;
background-repeat: no-repeat;
}
|
всё вроде хокей, но bodyDiv получает всю высоту страницы а не оставшеюся после headerDiv, topMenuBarDiv и footerDiv.
Можно было бы конечно убрать height из bodyDiv, но тогда, конечно footerDiv остаётся в самом низу, но bodyDiv остаётся не растянутым.
Что я тут не понимаю? |
)