Как растянуть #contant на всю страницу?

vova.a99 · September 15, 2012

Нужно для прижатия подвала к низу.

HTML:

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Аренда и продажа кофемашин и продажа кофе</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="topline"></div>
<div id="contant"><div id="ave"><!--Приветствие-->
<img src="img/logo01.png" alt="логотип" width="250" height="239" id="logo">
<h1>Мы приветствуем вас на нашем сайте по аренде, продаже кофемашин, а так же продаже высококаче-
ственного кофе</h1>
</div> 
<ul class="menu">
<li><a href="index.html"><p>О проекте</p></a></li>
<li><a href="#"><p>Всё о кофе</p></a></li>
<li><a href="#"><p>Продажа и доставка кофе</p></a></li>
<li><a href="#"><p>Кофейные аппараты</p></a></li>
<li><a href="#"><p>Контакты</p></a></li>
</ul>
<ul class="dopmenu">
<li><a href="#">Кофейный мир - Москва</a></li>
<li><a href="#">Кофейный мир - Киев</a></li>
<li><a href="#">Кофейный мир - Николаев</a></li>
<li><a href="#">Кофейный мир - Крым</a></li>
</ul>
<ul class="dopmenu1">
<li><a href="#">Кофейное дерево</a></li>
<li><a href="#">Виды кофе</a></li>
<li><a href="#">О пользе кофе</a></li>
<li><a href="#">Все статьи</a></li>
</ul>
<ul class="dopmenu2">
<li><a href="#">Цены на кофе</a></li>
<li><a href="#">Механизм продажи и доставки</a></li>
<li><a href="#">Соопутствующие товары</a></li>
</ul>
<ul class="dopmenu3">
<li><a href="#">Виды кофемашин</a></li>
<li><a href="#">Продажа кофемашин</a></li>
<li><a href="#">Аренда кофемашин</a></li>
<li><a href="#">Сервис, ремонт кофемашин</a></li>
</ul>
<div class="empty"></div>
</div>
<div id="footer">
<p>© Все права защищены..Бла-бла-бла</p>
<p id="w3ccss">
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="Правильный CSS!" />
    </a>
</p>   
</div>
</body>
</html>

CSS:

@import url('reset.css'); 
@import url('typography.css');
body {
	background: url(../img/bg.gif);
 min-height: 100% !important;
 height: auto;
 height: 100%;
 position: relative;
}
@media (max-width: 5000px) and (min-width: 801px){
.topline {
	width: 100%;
	min-width: 100%;
	height: 6px;
	background-color: #AA5224;
	color: #999;
	font-size: 0.1em;
	white-space: nowrap;
	display: block;
	line-height: 0px;
	}}
#contant{
	outline: solid #960 2px;
	width: 1000px;
    margin: 0 auto;
    position:relative;
    min-height:100% !important;
    height:auto;
    height:100%;
    color: #646464; 
    text-align: justify;
	}
#logo{
	margin: 0px auto 0px 22px;
	}
#ave {
	 height: 100%;
	 width: 300px;
	 padding: 10px;
	 float:left;
	 margin: 10px 10px 0 0;
	 }
.menu {
    height: 100%;
	min-height: 100%;
	width: 300px;
	float: right; 
	padding-top: 10px;
	display:block;
	margin: 20px 0px 0 0;
	}
ul.menu{
	float:left;	
	}
ul.menu a, li.menu a:visited { 
/*** Стили для неактивного пункта ***/   
	width: 300px;
	height: 100px;
	display:block;
	color: #666666;
	text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	background: url(../img/bg_menu.gif);
	text-align:center;
	margin-bottom: 30px;
	box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.81);
	padding-top: 20px;
	} 
ul.menu a:hover, li.menu a:visited:hover {
	/*** Стили при наведении курсора ***/
	width: 300px;
	height: 100px;
	display:block;
	color: #a7b69b;
	text-decoration: underline;
	font-family: Verdana, Geneva, sans-serif;
	background: url(../img/bg_menu.gif);
	text-align:center;
	margin-bottom: 30px;
	box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.81);
	padding-top: 20px;
	}  
ul.dopmenu{
	padding-top: 25px;
	display:block;
	}	
ul.dopmenu a, li.dopmenu a:visited {
	width: 340px;
	height: 20px;
	color: #A95225;
	font-family: Verdana, Geneva, sans-serif;
	text-align:left;
	text-decoration: none;
	margin-bottom: 10px;
	float: right;
	margin: 10px 0 0 10px; 
	display:block;
	}
ul.dopmenu a:hover, li.dopmenu a:visited:hover {
	width: 340px;
	height: 20px;
	color: #A95225;
	font-family: Verdana, Geneva, sans-serif;
	text-align:left;
	text-decoration: underline;
	margin-bottom: 10px;
	float: right;
	margin: 10px 0 0 10px;
	display:block;
	}
ul.dopmenu1{
	padding-top: 150px;
	display:block;
	}	
ul.dopmenu1 a, li.dopmenu1 a:visited {
	width: 340px;
	height: 20px;
	color: #A95225;
	font-family: Verdana, Geneva, sans-serif;
	text-align:left;
	text-decoration: none;
	margin-bottom: 10px;
	float: right;
	margin: 10px 0 0 10px; 
	display:block;
	}
ul.dopmenu1 a:hover, li.dopmenu1 a:visited:hover {
	width: 340px;
	height: 20px;
	color: #A95225;
	font-family: Verdana, Geneva, sans-serif;
	text-align:left;
	text-decoration: underline;
	margin-bottom: 10px;
	float: right;
	margin: 10px 0 0 10px;
	display:block;
	}
ul.dopmenu2{
	padding-top: 165px;
	display:block;
	}	
ul.dopmenu2 a, li.dopmenu2 a:visited {
	width: 340px;
	height: 20px;
	color: #A95225;
	font-family: Verdana, Geneva, sans-serif;
	text-align:left;
	text-decoration: none;
	margin-bottom: 10px;
	float: right;
	margin: 10px 0 0 10px; 
	display:block;
	}
ul.dopmenu2 a:hover, li.dopmenu2 a:visited:hover {
	width: 340px;
	height: 20px;
	color: #A95225;
	font-family: Verdana, Geneva, sans-serif;
	text-align:left;
	text-decoration: underline;
	margin-bottom: 10px;
	float: right;
	margin: 10px 0 0 10px;
	display:block;
	}
ul.dopmenu3{
	padding-top: 135px;
	display:block;
	}	
ul.dopmenu3 a, li.dopmenu3 a:visited {
	width: 340px;
	height: 20px;
	color: #A95225;
	font-family: Verdana, Geneva, sans-serif;
	text-align:left;
	text-decoration: none;
	margin-bottom: 10px;
	float: right;
	margin: 10px 0 0 10px; 
	display:block;
	}
ul.dopmenu3 a:hover, li.dopmenu a:visited:hover {
	width: 340px;
	height: 20px;
	color: #A95225;
	font-family: Verdana, Geneva, sans-serif;
	text-align:left;
	text-decoration: underline;
	margin-bottom: 10px;
	float: right;
	margin: 10px 0 0 10px;
	display:block;
	}
ul.dopmenu4{
	padding-top: 170px;
	display:block;
	}	
ul.dopmenu4 a, li.dopmenu4 a:visited {
	width: 320px;
	height: 20px;
	color: #A95225;
	font-family: Verdana, Geneva, sans-serif;
	text-align:left;
	text-decoration: none;
	margin-bottom: 10px;
	float: right;
	margin: 10px 0 0 10px; 
	display:block;
	}
ul.dopmenu4 a:hover, li.dopmenu4 a:visited:hover {
	width: 320px;
	height: 20px;
	color: #A95225;
	font-family: Verdana, Geneva, sans-serif;
	text-align:left;
	text-decoration: underline;
	margin-bottom: 10px;
	float: right;
	margin: 10px 0 0 10px;
	display:block;
	}
#contant .empty{
	height: 310px;
	}
@media (max-width: 5000px) and (min-width: 1000px){
#footer{
	background: url(../img/floor.jpg);
	height: 70px;
	width: auto;
	position:relative;
	margin-top: -130px;
	padding: 60px 0 0 20px;
	bottom: 0;	
	} 
#w3ccss{
	margin-top: 10px;	
	}}

Sign In

Как растянуть #contant на всю страницу?

Question

vova.a99

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information