Question

我有一个HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Прижатый к низу футер</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        html, body {
            height: 100%;
            background-color: #DDE4EA;
        }

        .container {
            max-width: 1250px;
            margin: 0 auto;
        }

        .page {
            min-height: 100%;
            height: auto !important;
            height: 100%;
        }

        .wrap {
            padding-bottom: 77px;
            background-color: #000;
            color: White;
        }

        .footer {
            height: 77px;
            margin-top: -77px;
            background-color: #E11;
            color: White;
        }
    </style>
</head>
<body>
    <!--<div class="container">-->
    <div class="page">
        <div class="wrap">
            Content
        </div>
    </div>
    <div class="footer">
        Footer
    </div>
    <!--</div>-->
</body>
</html>

在这种情况下，footer正在我需要的工作（顶部图片），当我取消注释div "container"时，页脚不起作用（底部图片）

见附件screenshot：

Answer 1

这种情况正在发生，因为您在CSS中应用了.container类而没有height: 100%;，而页脚现在包含在.container中。

Answer 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Прижатый к низу футер</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        html, body {
            height: 100%;
            background-color: #DDE4EA;
        }

        .container {
            max-width:100%;
            margin: 0 auto;
            height:100%;
        }

        .page {
            min-height: 100%;
            height: auto !important;
            height: 100%;
        }

        .wrap {
            padding-bottom: 77px;
            background-color: #000;
            color: White;
        }

        .footer {
            height: 77px;
            margin-top: -77px;
            background-color: #E11;
            color: White;
        }
    </style>
</head>
<body>
    <div class="container">
    <div class="page">
        <div class="wrap">
            Content
        </div>
    </div>
    <div class="footer">
        Footer
    </div>
    </div>

页脚我无法理解

2 个答案: