Question

我有倒数计时器和响应式壁纸。现在我想要做的是将div放在页面底部＆amp;它应该始终保持在底部。我在StackOverFlow上经历了一些类似的问题，但是通过实现我用来获取滚动条的代码，或者在页面底部留下了一些空间。这些是我使用的以下代码：

 div { 
   position: absolute; 
   height: 100px; 
   top: 100%; 
   margin-top:-100px; 
}

上面的代码给了我一个滚动条，下面的代码在底部留下了一些空格



position:absolute;
bottom:0;

position:absolute; bottom:0;

这是响应式图片的索引页面上的CSS：

＆安培;这是我有的style.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>

实际上索引页面上只有一个名为“countdown clearfix”的div类。我是HTML / CSS的菜鸟，所以我需要一些帮助。

Answer 1

您还可以尝试使用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">如何全部是视口的100％高度，<div id="wrapper">然后允许底部的一些空间具有负边距100px，然后由<div id="footer">填充。 <div id="push">就是为了确保页脚的空间始终可用。

如果页面内容小于视口，则页脚将会“粘贴”。在浏览器视口的底部，如果内容较大，则页脚将始终位于底部。

Answer 2

在中心底部放置一个div 100px高/ 1000px宽的div你需要：

#bottom-div {
    height:100px;
    width:1000px;
    margin:0 auto 0 auto;
    bottom:0;
    position:absolute;
}

Answer 3

div {
    position: absolute;
    height: 100px; /* this and */
    bottom: 100px; /* this should correspond with eachother */
    margin: 0;
    padding: 0;
}

Answer 4

使用这个确切的代码，它会起作用。

<html>
<head>
<style>
#body {
    margin:0;
    padding:0;
    height:auto;
    text-align:center;
    width:100%;
}
#wrap {
    margin:0 auto 0 auto;
    text-align:left;    
    position:relative;
    width:1000px;
}
#bottom {
    position:fixed;
    bottom:0;
    padding: 10px;
    text-align:center;
    height: 50px;
    border:1px solid #c0c0c0;
    width:1000px;
    margin: 0;
}
</style>
</head>
<body>
    <div id="wrap">
        <div id="bottom">
            bottom
        </div>
    </div>
</body>
</html>

将DIV推到页面底部

4 个答案: