Question

我有一个html页面，第一个屏幕被设计为覆盖100％的屏幕（高度和宽度）。我需要在页面底部放置一个div，但我无法弄清楚如何。

我不能使用固定位置，因为它是一种视差模板，所以只要用户向下滚动页面就会覆盖div，如果我使用margin-top：x，则div将位于页面底部只有一定的屏幕分辨率，任何人都知道我该怎么做才能解决这个问题？

Answer 1

我最近一直关注这个技术

how-to-keep-footer-at-bottom-of-page-with-css

它很简单，适用于所有浏览器，并且不依赖于奇怪的黑客攻击。

如果HTML结构是

<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</body>

高度为80px的页脚的CSS将是

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    padding:10px;
}
#content {
    padding:10px;
    padding-bottom:80px;  
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
}

Answer 2

添加位置：绝对; ＆安培;底部：0;你的div风格

将div保留在页面底部，屏幕大小不同

2 个答案: