Question

我有一个由“页面”组成的网站（可见区域的高度为100％）。请查看以下css：

html {
height: 100%;
}

body{
height:100%;
margin: 0 auto;
}

.page{
height: 100%;
margin: 0 auto;
min-height: 700px;
min-width: 1024px;
}

.content {
margin: 0 auto; 
text-align: center; 
height: 100%;
min-height: 800px;
min-width: 1024px;
}

.footer {
width: 100%;
min-height: 200px;
background-color:red;
}

 .hidden{
width: 100%;
height: 500px;
background-color:blue;
   }

.image {
display:block;
height: 100px;
width: 100px;
}

这是代码：

  <div class="page">
     <div class="content">

        <img class="image" src="img/image.png1"> 
        <img class="image" src="img/image.png2"> 
        <img class="image" src="img/image.png3">   

        <div class="hidden" style="visibility:hidden">
        </div>

     </div>

     <div class="footer">
     </div>

  </div>

我需要：

1）页面加载时页脚对齐底部 2）几秒钟后，使用javascript我会显示隐藏的div，并且页脚必须向下滑动。

我不能同时获得这两件事，因为我可以用

获得1）

footer {
    position: absolute;
    bottom: 0;
}

但是这样当我显示隐藏的div时它会与页脚重叠。否则，如果我删除了最后一个代码，当隐藏的div出现时，页脚正确向下滑动，但是当我加载页面时，页脚不在底部。有人有什么建议吗？

Answer 1

怎么样;

position: relative;
bottom: -100%;

Answer 2

您应该尝试使用此代码：

html {
    position: relative;
    min-height: 100%;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

Answer 3

对我有用的是以下代码：

locateResource

问题是在用户滚动之前不会看到页脚，你可以给它一个小于100vp的margin-top但它取决于可以改变的页脚高度。

注意： vp表示视口高度

css对齐页脚底部而不使用position：absolute

3 个答案: