我有倒计时器和响应式壁纸.现在我想要做的是将div放在页面底部的中心,它应该始终保持在底部.我在StackOverFlow上经历了一些类似的问题,但是通过实现我用来获取滚动条的代码,或者在页面底部留下了一些空间.这些是我使用的以下代码:
div {
position: absolute;
height: 100px;
top: 100%;
margin-top:-100px;
}
上面的代码给了我一个滚动条,下面的代码在底部留下了一些空格
position:absolute;
bottom: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的菜鸟,所以我需要一些帮助.
您还可以尝试粘性页脚技术:
<!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">都是视口的100%高度,<div id="wrapper">然后允许底部的一些空间具有100px的负边距,然后填充<div id="footer">.的<div id="push">是就在那里,以确保室内页脚始终可用.
如果页面内容小于视口,则页脚将"粘贴"到浏览器视口的底部,如果内容较大,则页脚将始终位于底部.