Не растягивается блок с контентом при указании min-height: 100%

crazygangster77 · November 22, 2012

Добрый день. Проблема в том, что нужно растягивать основной блок на всю ширину экрана, чтобы не появлялся скролл, когда контента мало и он не раздвигает основной блок.

Это не заметно на маленьких мониторах, контент всегда прибит к низу. сегодня поставил 30 дюймовый моник и увидел такую картину скриншот

футтер прибит к низу но вот контентная часть не хочет раздвигаться при указании height:100%.

код шаблона:


<!DOCTYPE html>
<html>
	<head>
<!--[if lt IE 9]> 
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->
	</head>
	<body>
		<section>
			<!--Хедер-->
			<header>
			</header>
			<!--/Хедер-->
			<!--Контент-->
			<div id="main">
				<div class="main-body">
					<!--Левая колонка-->
					<nav>

						<div class="navigation">
						</div>
					</nav>
					<!--/Конец Левой колонки-->
					<div id="contents">
						<!--текст-->
						<div class="main_text">
						</div>
						<!--/текст-->
				   </div>
					<!--Правая колонка-->
					<figure>
						 <div class="navigation">
						 </div>
					</figure>
					<!--Конец правой колонки-->
				</div>
			</div>
			<div id="sidebar">
			</div>
		</section>
		<!--/Конец Контента-->
		<!--Подвал-->
		<footer>
			<div class="copy">
			</div>
		</footer>
	</body>
</html>

Стили css:


*{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

article, section, header, footer, nav, time, figure {
display: block;
}
div,span,p,a,font,ul,li{
margin:0px;
padding:0px;
outline:none;
font-size:100%;
vertical-align:baseline;
background:transparent;
list-style:none;
}
body, html{
height: 100%;
margin:0px;
padding:0px;
}
* html section { /* хак для ie6 */
height: 100%; /* для ие6, т.к. не понимает min-height */
}
section{
width: 1280px; 
min-height:100%;
margin: 0px auto; 
position: relative; 
text-align:center;
z-index: 1;
}
header{
position: relative;
width: 1280px;
height: 150px;
}
#main {
overflow:hidden;
position: relative;
width:1280px;
text-align: left;
border-radius:25px;
background-color:#957D8C;
height:100%;
}
.main-body{
overflow:hidden;
width:1264px;
background-color:#FFF;
border-radius:17px;
margin:8px;
position: relative;
height:100%;
}
nav {
position: relative;
width: 240px;
float:left;
margin: 10px 0px 10px 10px;
z-index: 80;
}
#contents {
width: 764px;
padding:0px 10px;
position:relative;
float:left;
}
.main_text {
width: 740px;
margin:10px auto;
line-height:1.5em;
font-size: 1.0em;
}
figure {
width: 240px;
float:left;
position:relative;
margin: 10px 10px 10px 0px;
}
#sidebar {
height: 35px; 
clear:both;
width: 1280px;
position: relative;
}
footer {
height: 30px; 
width: 1280px;
margin:0 auto;
margin-top:-30px;
position: relative;
}

Сайт где можно посмотреть 7detei.ru

Подскажите Пожалуйста что не так делаю?

Sign In

Не растягивается блок с контентом при указании min-height: 100%

Question

crazygangster77

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information