3

我有一个页脚有的页面：

postion: absolute;
bottom: 0;

当窗口的高度大于内容时它可以正常工作，但是当它小于页脚显示在文本上方的内容时。我试着把

body {
    min-height: 550px;
}

但这并不能解决问题，我可以滚动，但页脚与视口的底部对齐，（在 android 上，当我滚动时，页脚会移动到窗口的底部）。

有滚动条时是否可以将页脚与页面底部对齐？

这是我的页面。

4

2 回答 2

4

添加position:relative到<body>根据<body>、 not<html>或视口使页脚位置自身：

body {
    position:relative;
}

请参阅此jsfiddle并使用“切换”按钮<body>在相对定位和静态定位之间切换并观察不同之处。

这是因为position:absolute元素位置本身基于“知道”其位置的最深父级。来自MDN：

定位元素是计算位置属性为relative、absolute或的元素fixed。

于 2013-09-10T10:53:01.297 回答
1

如果我理解正确

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Layout Example</title>
<style type="text/css">
html, body { 
    margin:0; padding:0; 
    height:100%; 
    font-size:12px; font-family:Verdana, Geneva, sans-serif; 
}

.container { width:900px; position:relative; margin:0 auto; }
.body { min-height:100%; position:relative; }

/**
 * padding-bottom -> the "computed" height of the footer (height + padding).
 * In this example 20 + 10 + 10 = 40 (height + padding-top + padding-bottom)
 */
.main { padding-bottom:40px; }

.header { background-color:#006600; color:#FFFFFF; margin-bottom:10px; padding:10px; }
.page { background-color:#CCCCCC; padding:10px; }

.footer { position:absolute; bottom:0; display:block; width:100%; z-index:1000; }
.footer .container { 
    background-color:#000000; color:#FFFFFF; 
    padding:10px; height:20px; 
}

</style>
</head>

<body><div class="body">
    <div class="main container">
        <div class="header"><strong>Header</strong></div>
        <div class="page">Page content</div>
    </div>

    <div class="footer">
        <div class="container"><strong>Footer</strong> <em>always at bottom ;) </em></div>
    </div>

</div></body>
</html>

请参阅jsfiddle并发布

于 2013-09-10T10:31:02.533 回答