css sticky footer without scrollbar
How to do to avoid having the scroller with a sticky footer to the bottom of the page (not bottom of window)? When I remove height=100% from content and sidebar, I'm no more getting the scroller. However, when doing so, my content and sidebar do not fill all the space down to the footer.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">开发者_运维百科;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 13</title>
<style media="all" type="text/css">
* {
margin: 0;
padding: 0;
}
html, body, #wrap, form {
height: 100%;
}
#wrap, #footer {
width: 750px;
margin: 0 auto;
}
#wrap {
background: #cff;
}
html, body {
color: #000;
background: #a7a09a;
}
body > #wrap {
height: 100%;
min-height: 100%;
}
form {
/*height: auto;*/
min-height: 100%;
}
#main {
background: #000;
height:100%;
min-height:100%;
height: auto !important; */
}
#content {
height:100%;
float: left;
padding: 10px;
float: left;
width: 570px;
background: #9c9;
}
#sidebar {
height:100%;
float: left;
width: 140px;
background: #c99;
padding: 10px;
}
#footer {
position: relative;
margin-top: -100px;
height: 100px;
clear: both;
background: #cc9;
bottom: 0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
#header {
/*padding: 5px 10px;*/
background: #ddd;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="wrap">
<div id="main" class="clearfix">
<div id="header">
<h1>header</h1>
</div>
<div id="sidebar">
<h2>sidebar</h2>
</div>
<div id="content">
<h2>main content</h2>
</div>
</div>
</div>
<div id="footer">
<h2>footer</h2>
</div>
</form>
</body>
</html>
Here is finally one solution (I don't remember where I get this code .... it's not mine ;-) ) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
<title>CSS Layout - 100% height</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%; /* needed for container min-height */;
background: gray;
font-family: arial,sans-serif;
font-size: small;
color: #666;
}
div#container {
position: relative; /* needed for footer positioning*/;
margin: 0 auto;
/* center, not in IE5 */ width: 750px;
background: #f0f0f0;
height: auto !important; /* real browsers */;
height: 100%; /* IE6: treaded as min-height*/;
min-height: 100%; /* real browsers */
}
div#header {
padding: 1em;
/*background: #ddd url("../csslayout.gif") 98% 10px no-repeat;*/
border-bottom: 6px double gray;
}
div#content {
padding: 1em 1em 5em; /* bottom padding for footer */
}
div#footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */;
background: #ddd;
border-top: 6px double gray;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
entete </div>
<div id="content">
contenu </div>
<div id="footer">
pied de page
</div>
</div>
</body>
</html>
I've done this using a container div with a 100% min-height. Then, I have the page content and footer div's in the container. Here's my HTML:
<div id="MainContainer">
<div id="FullPage">
</div>
<div id="Footer">
</div>
</div>
And here's my corresponding CSS:
html, body, #MainContainer
{
min-height: 100%; /*Sets the min height to the height of the viewport.*/
height: 100%; /*Effectively, this is min height for IE5+/Win, since IE wrongly expands an element to enclose its content. This mis-behavior screws up modern browsers*/
margin: 0;
padding: 0;
}
html > body #MainContainer
{
height: auto; /*this undoes the IE hack, hiding it from IE using the child selector*/
}
#MainContainer
{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#FullPage
{
height: auto;
width: 100%;
min-height: 100%;
margin: 0;
padding: 0 0 25px 0;
overflow: hidden;
}
#Footer
{
clear: both;
left: 0;
width: 100%;
height: 20px;
position: absolute;
bottom: 0;
}
加载中,请稍侯......
精彩评论