问题CSS粘页脚执行情况
https://stackoverflow.com/questions/1112082
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
Im具有一些问题越来越粘尾工作在我的网站。如果内容是比较小的窗口中的脚注应该留在底部的窗和死亡空间应填补了一个div。我认为的 CSS粘页脚 这样做，但我不能获得"推div"工作推内容一路下跌。正如你可以看到我的代码不仅仅是身体-包装-脚注。
<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混淆有关CSS粘页脚码应该在我的情况。
编辑，下面有什么我得到了什么我想要做的:alt文本http://bayimg.com/image/gacniaacf.jpg
解决方案
您HTML是一点点奇怪。例如，为什么banner-bg周围的一切包装？
这表示，为了使用粘性页脚技术，你需要包装的一切，但页脚成一个单一的DIV。所以，你的<body>标签将只包含两个顶级的DIV - wrapper和footer。所有你目前拥有的东西会去那个包装DIV里面。
请注意置顶页脚可能不适合你如果您使用的背景图像包括透明区域，因为它依赖于wrapper背景覆盖由标题
更新：确定，这里的作品版本。 “粘性页脚”样式表是从 cssstickyfooter.com 拍摄，应该在工作，所有现代浏览器。我已经简化了你的HTML一点（有没有需要单独的背景图层根据您的图片），但只要你喜欢，只要你保持基本结构的地方，你可以修改它。此外，由于我没有你的图片我已经添加了坚实的背景颜色说明目的，你需要将其删除。
<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粘脚注)，它是一个容易得多，我只是重复它。因此，这里的那样：
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
}
#container {
height: 100%;
margin: 0 0 -200px 0;
position: relative;
}
#footer {
position: relative;
height: 200px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">Oh Beautiful Header</div>
<div id="content">Lots of Content</div>
</div>
<div id="footer">Stay Put Little Footer</div>
</body>
基本上负保证金应与高度的脚注，高度100%需要适用于html/体，且相对位置应该宣布。
还在参照xHTML，通知怎么的"脚"div不是里面的"容器"的格，但是相反，它之外的(因此，有2个独立的容器样div，容器和脚注).
如果您还有问题中，主要问题与你的标记：
- 100%的高度需求，以被宣布为html和身体标记。
- 负保证金是缺少的容器上的div其是横幅-bg
- 如果脚注是100像素高#横幅-bg应该有余下：-100像素
位置需要相对的两#横幅-bg和#脚
html{高度：100%;}
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; height: 100%; } #banner-bg { width: 100%; height: 100%; background-image: url("Images/img2.gif"); background-repeat: repeat-x; position: relative; margin: 0 0 -200px 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; } #footer { position: relative; height: 200px; }
其余:
<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 -->
<div id="footer">
Footer Content
</div>
</body>
</html>
我不知道是什么置顶页脚的意思做，当含量比你的页面高度实际上较长... 如果它应该是浮在文字上，而你正在滚动的话，我会使用Javascript来计算底部坐标，并把页脚在固定位置的新层。这可能是取得了相当的跨浏览器的友好，以及...
这是伟大的，能够实现使用CSS和HTML单独粘页脚，但我不是调整我的标记/文件结构的东西，化妆品的忠实粉丝。
我更喜欢一个JavaScript方法，没有优雅降级。如果没有JS，无粘页脚。我通常使用jQuery来实现：
<强>的jQuery
$(window).resize(function() {
if ($('body').height() < $(window).height()) {
$('#footer').addClass('fixed');
}
else {
$('#footer').removeClass('fixed');
}
}).resize();
<强> CSS
#footer.fixed { position: fixed; bottom: 0; width: 100%; }
在这里你可以找到一些代码如下：
CSS以下行添加到您的样式表。在.wrapper余量负值是相同的数量.footer和.push的高度。负余量应总是等于页脚的全部高度（包括您可以添加任何填充或边框）。
<强>在CSS：
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
按照此HTML结构。没有内容可以是.wrapper和.footer div标签外，除非它是绝对定位与CSS。此外，还应该是.push DIV中没有任何内容，因为它是一个隐藏的元素“推”向下页脚所以它不重叠任何东西。
<强>在HTML体：
您的网站内容在这里。
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2013</p>
</div>
