我有一个倒计时计时器和一个响应式壁纸。现在我想要做的是将页面底部的 div 居中，它应该始终位于底部。我在 StackOverFlow 上经历了一些类似的问题，但通过实现该代码，我曾经得到一个滚动条，或者页面底部留下了一些空间。这些是我使用的以下代码:
div {
position: absolute;
height: 100px;
top: 100%;
margin-top:-100px;
}
上面的代码给了我一个滚动条，下面的代码在底部留了一些空间
position:absolute；
底部:0；
这是响应式图像索引页面上的 CSS:
<style>
body {
background-attachment: fixed;
background-image: url(bg.png);
background-position: top center;
background-repeat: no-repeat;
margin:0;
padding: 0;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover; }
</style>
& 这是我的 style.css
body, p, span, div { font-family: 'Droid Sans', arial, serif;font-size:12px;line-height:18px;color:#6d6d6d; }
.countdown { padding-top:15px;width:100%;margin:auto; }
.countdown .countdown_section { background:url('images/backcountdown.png') no-repeat 1px top;float:left;width:54px;height:145px;margin:0 5px;text-align:center;line-height:6px; }
.countdown .countdown_amount { font-size:15px;color:#ab7100; text-shadow:0 0.8px #fedd98; line-height:52px; font-weight:bold; text-align: left; }
.countdown span { font-size:8px;color:#999999;text-transform:uppercase;line-height:26px; }
实际上在索引页上只有一个名为“countdown clearfix”的 div 类。我是 HTML/CSS 的菜鸟，所以我需要一些帮助。
最佳答案
您也可以尝试 sticky footer技术:
<!DOCTYPE html>
<html>
<head>
<style>
/* Add styles from next code block here if you want them in the same file */
</style>
</head>
<body>
<div id="wrapper">
<!-- Regular page contents -->
<div id="push"><!-- Leave this element empty --></div>
</div>
<div id="footer">
<!-- Countdown goes here -->
</div>
</body>
</html>
使用以下 CSS(在单独的文件中或在 <style> 标记内):
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -100px; /* <- If you change this height... */
}
#footer, #push {
height: 100px; /* <- ...then you should also change this height! */
}
body {
background-attachment: fixed;
background-image: url(bg.png);
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
}
注意如何 <html> , <body>和 <div id="wrapper">都是视口(viewport)的 100% 高度，<div id="wrapper">然后在底部留出一些空间，负边距为 100px，然后由 <div id="footer"> 填充. <div id="push">只是为了确保页脚的空间始终可用。
如果页面内容小于视口(viewport)，页脚将“粘”在浏览器视口(viewport)的底部，如果内容较大，则页脚将始终位于底部。
关于html - 将 DIV 推到页面底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8565819/