CSS粘滞脚注实现的问题 [英] Problem with CSS Sticky Footer implementation
问题描述
我有一些问题获取粘性页脚在我的网站上工作。如果内容小于窗口，页脚应该留在窗口的底部，死空间应该填充一个div。我认为，应可在所有现代浏览器中使用。我已经精简你的HTML一点（没有必要根据你的图片单独的背景图层），但你可以修改它，只要你保持基本的结构就位。此外，由于我没有您的图片，我已添加坚实的背景颜色为说明目的，您需要删除它们。
< html>
< head>
< style>
* {margin：0; padding：0}
html，body，#wrap {height：100％}
body> #wrap {height：auto; min-height：100％}
#main {padding-bottom：100px} / *必须与页脚相同高度* /
#footer {position：relative;
margin-top：-100px; / *页脚高度的负值* /
height：100px;
clear：both;
}
/ * CLEAR FIX * /
.clearfix：after {content：。;显示：block; height：0;清除： visibility：hidden}
.clearfix {display：inline-block}
/ *隐藏来自IE-mac \ * /
* html .clearfix {height：1％}
.clearfix {display：block}
/ *从IE-mac结束隐藏* /
/ *不要触摸上面的样式 - 请参阅http://www.cssstickyfooter.com * /
body {
background-image：url（Images / img.gif）;
background：＃99CCFF;
color：#FFF;
font-size：13px;
font-weight：normal;
font-family：verdana;
text-align：center;
overflow：auto;
}
div＃banner {
position：absolute;
top：0;
left：0;
width：100％;
height：9em;
background：url（Images / img2.gif）repeat-x;
background：＃000;
}
div＃wrap {
background：＃666;
width：84em;
margin-left：auto;
margin-right：auto;
}
div＃header {
height：16em;
padding-top：9em; / * banner height * /
background：url（Images / header / header-bg.png）;
background：＃333;
}
div＃footer {
background：＃000;
width：84em;
margin-left：auto;
margin-right：auto;
}
< / style>
< / head>
< body>
< div id =banner>横幅< / div>
< div id =wrap>
< div id =mainclass =clearfix>
< div id =header>标头< / div>
< div id =content>
内容< br />
内容< br />
内容< br />
内容< br />
内容< br />
内容< br />
内容< br />
内容< br />
内容< br />
内容< br />
Content
< / div> <！ - end content - >
< / div> <！ - end main - >
< / div>
< div id =footer>
Footer
< / div>
< / body>
< / html>
Im having some problems getting the Sticky Footer to work on my site. If the content is smaller than the window the footer should stay at the bottom of the window and the dead space should be filled up with a div. I think the CSS Sticky Footer does this, but I cant get the "push div" to work push the content all the way down. As you can see my code isn't just body-wrapper-footer.
<body>
<div id="banner-bg">
<div id="wrapper">
<div id="header-bg">
<!-- header stuff -->
</div> <!-- end header-bg -->
<div id="content-bg">
<div id="content">
<!-- content stuff -->
</div> <!-- end content -->
</div> <!-- end content-bg -->
</div> <!-- end wrapper -->
</div> <!-- end banner-bg -->
</body>
body {
color: #00FFFF;
background-image: url("Images/img.gif");
font-size: 1em;
font-weight: normal;
font-family: verdana;
text-align: center;
padding: 0;
margin: 0;
}
#banner-bg {
width: 100%;
height: 9em;
background-image: url("Images/img2.gif"); background-repeat: repeat-x;
position: absolute; top: 0;
}
#wrapper {
width: 84em;
margin-left: auto;
margin-right: auto;
}
#header-bg {
height: 16em;
background-image: url("Images/header/header-bg.png");
}
#content-bg {
background-image: url("Images/img3.png"); background-repeat: repeat-y;
}
#content {
margin-right: 2em;
margin-left: 2em;
}
Im confused about where the CSS Sticky Footer-code should go in my case.
Edit, heres what I got and what I want to do:
Your HTML is a tad strange. For example, why does banner-bg wrap around everything?
That said, in order to use Sticky Footer technique you need to wrap everything but the footer into a single DIV. So your <body> tag would only contain two top DIVs - wrapper and footer. All the stuff you currently have would go inside that wrapper DIV.
Note that Sticky Footer may not work for you if background images you're using include transparent areas as it relies on wrapper background being covered by the header.
Update: Ok, here's the version that works. "Sticky Footer" style sheet is taken from cssstickyfooter.com and should work in all modern browsers. I've streamlined your HTML a bit (there's no need for separate background layers based on your picture) but you can modify it as you like so long as you keep the basic structure in place. Also, since I don't have your images I've added solid background colors for illustration purposes, you'll need to remove them.
<html>
<head>
<style>
* {margin: 0; padding: 0}
html, body, #wrap {height: 100%}
body > #wrap {height: auto; min-height: 100%}
#main {padding-bottom: 100px} /* must be same height as the footer */
#footer {position: relative;
margin-top: -100px; /* negative value of footer height */
height: 100px;
clear:both;
}
/* CLEAR FIX*/
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden}
.clearfix {display: inline-block}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%}
.clearfix {display: block}
/* End hide from IE-mac */
/* Do not touch styles above - see http://www.cssstickyfooter.com */
body {
background-image: url("Images/img.gif");
background: #99CCFF;
color: #FFF;
font-size: 13px;
font-weight: normal;
font-family: verdana;
text-align: center;
overflow: auto;
}
div#banner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 9em;
background: url("Images/img2.gif") repeat-x;
background: #000;
}
div#wrap {
background: #666;
width: 84em;
margin-left: auto;
margin-right: auto;
}
div#header {
height: 16em;
padding-top: 9em; /* banner height */
background: url("Images/header/header-bg.png");
background: #333;
}
div#footer {
background: #000;
width: 84em;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="banner">Banner</div>
<div id="wrap">
<div id="main" class="clearfix">
<div id="header">Header</div>
<div id="content">
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content
</div> <!-- end content -->
</div> <!-- end main -->
</div>
<div id="footer">
Footer
</div>
</body>
</html>
这篇关于CSS粘滞脚注实现的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
