У меня есть веб-сайт с горизонтальной прокруткой с фиксированной боковой панелью и нижним колонтитулом.Я пытаюсь довести содержание до 100% высоты, чтобы сесть в нижний колонтитул.Хотя моя боковая панель находится на высоте 100%, хотя в ней почти нет содержимого, я не могу заставить свои элементы содержимого перейти на 100% и сесть в нижний колонтитул.Вот моя структура HTML:
<html class="multiplebgs" xmlns="http://www.w3.org/1999/xhtml">
<body>
<div class="wrapper">
<div class="sidebar">
<div class="hlogo">Lorem Ipsum</div>
<div class="navigation demi f11">
<ul>
<li><a href="#content1">ABOUT US</a></li>
<li><a href="#content2">WHAT WE DO</a></li>
<li><a href="#content3">OUR THEORY</a></li>
<li><a href="#content4">PORTFOLIO</a></li>
<li><a href="#content5">CLIENTS</a></li>
<li><a href="#content6">CONTACT US</a></li>
</ul>
</div>
</div>
<section class="habout step">
<div class="content" id="content1">
</div>
</section>
</div>
<div class="footer fcolor">
</div>
</body>
</html>
И мой CSS:
html {
background: url(../img/bg.png) no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bg.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bg.png', sizingMethod='scale')";
height:100%;
}
body {
margin:0;
height: 100%;
font-family:Verdana,Tahoma,Arial,Sans-Serif;
color:black;
font-size:12px;
width: 12660px;
}
.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -45px;
}
.content{
float:left;
width:1000px;
margin: 0px;
height: 100%;
padding: 0 360px;
}
#content1 { background:url(../img/bgaboutus.png) no-repeat bottom center;}
.sidebar {
float:left;
width:350px;
position: fixed;
background: url(../img/bg.png) no-repeat fixed;
-webkit-background-size: cover;
background-size:cover;
height: 100%;
z-index: 1;
}
.step {
float: left;
margin: 0px;
position:relative;
height: 100%;
min-width: 1000px;
padding: 0px;
overflow:auto;
}
.no-multiplebgs .habout {}
.multiplebgs .habout {background: url(../img/naboutus.png) top right no-repeat fixed;}
Даже если я применяю CSS класса боковой панели, который имеет высоту 100%, разделы и элементы содержимого не растягиваютсядо 100% высоты.
Любые предложения приветствуются.Спасибо