Подвал прижать к низу страницы
530 повідомлень
#16 років тому
Уважаемые фрилансеры помогите пожалуйста.
Вот сверстал сайт
В сайте: Шапка фиксированая высота + 2 ссылки и подвал который должен быть всеха прижат к нижнему краю страницы. Незнал как это сделать но нашел готовый генератор макетов, который мне предложил добавить wrapper см. ниже сss все бы было отлично но при высоте меньше 644px подвал едет на шапку. Помогите исправить
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<!--><link rel="stylesheet" href="style_ie.css" type="text/css" media="screen" /><!-->
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<div id="taxi">
<a href="#"><img src="images/taxi.jpg"></a>
</div>
<div id="shop"><a href="#"><img src="images/shop.jpg"></a></div>
</div>
</div>
</div>
<div id="footer">
<div id="center">
<p>Группа компаний “ПЧЁЛКА” 2009 год</p>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
html {
height: 100%
}
body {
background: #f1d98f url(images/cbg.jpg) repeat-y center 367px;
height: 100%;
}
img {
border: none;
}
p {
text-align: center;
color: #d2bc7a;
font: bold 12px Arial;
padding-top: 238px;
}
#wrapper {
min-width: 1000px;
min-height: 100%;
height: auto !important;
height: 100%;
}
#header {
width: 100%;
height:367px;
background: url(images/1stblockbg.jpg) repeat-x;
}
#logo {
margin: 0 auto;
width: 851px;
height: 367px;
background: url(images/main.jpg) no-repeat;
}
#taxi {
float: left;
padding: 206px 0px 0px 53px;
}
#shop {
float: left;
padding: 213px 0px 0px 197px;
}
#footer {
margin-top: -272px;
min-width: 1000px;
height: 272px;
background: url(images/lbg.jpg) repeat-x;
}
#center {
margin: 0 auto;
width: 851px;
height: 272px;
background: url(images/lcopbg.jpg) no-repeat;
}
* html #wrapper,
* html #footer {
width: expression((documentElement.clientWidth||document.body.clientWidth)<995?'1000px':'');
}
