我有一个由“页面”组成的网站(可见区域的高度为 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 出现时,页脚会正确向下滑动,但当我加载页面时,页脚不在底部。 有人有什么建议吗?
最佳答案
怎么样;
position: relative;
bottom: -100%;
关于html - css 在不使用位置 :absolute 的情况下对齐页脚底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24286211/