Question

我有一个页脚所在的页面：

postion: absolute;
bottom: 0;

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

body {
    min-height: 550px;
}

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

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

这是我的page。

Answer 1

将position:relative添加到<body>以根据<body>，而不是<html>或视口：

自行创建页脚位置

body {
    position:relative;
}

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

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

定位元素是一个元素，其计算位置属性为relative，absolute或fixed。

Answer 2

如果我理解正确

<!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和post

如何将文本绝对定位到页面底部而不是视口？

2 个答案: