Я новичок в использовании CSS, и я читаю учебные пособия и просмотр примеров кодов. Прямо сейчас я использую метод искусственного столбца , как описано Китом Донеганом на Code-Sucks.com , и решение с липким нижним колонтитулом , как описано Стивом Хэтчером .
Я читал похожие вопросы, уже опубликованные здесь, о расширении тегов div до нижней части страницы, но они, похоже, не работают для меня. Я установил высоту и минимальную высоту равными 100% во всех моих классах css, но, похоже, это не работает.
Кроме того, в текущем коде есть проблема, когда нет никакого поля, когда моя «оболочка» помещается в мой нижний колонтитул. Мне нужно хорошее поле в 5px, но оно полностью исчезает.
Ниже мой CSS. Я взял много комментариев и кредитов для удобства чтения.
* {margin:0;padding:0;}
html {height: 100%;}
body {
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: auto;
width: 922px;
height: 100%;
}
#main {overflow:auto;
padding-bottom:155px; /* must be same height as the footer */
}
#faux {
background: #CCCCCC;
margin-bottom: 5px;
overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
width: 100%
min-height:100%;
}
#header {
color: #333;
width: 902px;
padding: 10px;
height: 100px;
margin: 0px 0px 5px 0px;
background: #ABBEBE;
position: relative;
}
#leftcolumn {
display: inline;
color: #333;
margin: 10px;
padding: 0px;
width: 195px;
float: left;
min-height: 100%;
}
#rightcolumn {
float: right;
color: #333;
margin: 10px;
padding: 0px;
width: 683px;
display: inline;
position: relative;
min-height: 100%;
}
#footer {position: relative;
margin: 5px auto;
width: 902px;
margin-top: -155px; /* negative value of footer height */
height: 130px;
clear:both;
background: #ABBEBE;
color: #333;
padding: 10px;
}
#.clear { clear: both; background: none; }
Мой HTML-код выглядит следующим образом
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Faux Column CSS Layouts - 2 Column - faux-1-2-col</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<div id="main">
<!-- Begin Header -->
<div id="header">
This is the Header
</div>
<!-- End Header -->
<!-- Begin Faux Columns -->
<div id="faux">
<!-- Begin Left Column -->
<div id="leftcolumn">
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
<h1>Faux Column CSS Layouts</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<p> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<div class="clear"></div>
</div>
<!-- End Right Column -->
<div class="clear"></div>
</div>
<!-- End Faux Columns -->
</div>
</div>
<!-- End Wrapper -->
<!-- Begin Footer -->
<div id="footer">
This is the Footer
</div>
<!-- End Footer -->
</body>
</html>
Буду признателен за любую помощь.