Question

我正在编写一个Web应用程序并试图让页脚粘在窗口的底部。当内容较大时，按下页脚的窗口。反正是为了让它坚持到窗口底部并允许内容滚动？

HTML是......

   <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;"/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html { 
            height: 100%;
        }

        body {
            height: 100%;
        }

        .page {
            width: 100%;
            min-height: 100%;
        }

        .push {
            padding-bottom: 4em;
            overflow: auto;
        }

        #footer {
            position: relative;
            margin-top: -4em;
            height: 4em;
            clear: both;

            background-color: red;
        }
        </style>
</head>

<body>
    <div class="page">
        <div id="content">
         <p>content goes here</p>
        </div>
        <div class="push"></div>
    </div>
    <div id="footer">
        <p>This is the footer block.</p>
    </div>
</body>

Answer 1

试试这个：

    body {
        height: 100%;
        margin-bottom: 4em;
    }

    #footer {
        position: absolute;
        bottom: 0;
        height: 4em;
        clear: both;

        background-color: red;
    }

Answer 2

将所有内容放入包装中的Main中并使用以下内容：

html, body, form
{
    height: 100%;
}

#wrapper
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -80px;   (-80px will be different for you, usually the same as the footer but negative but mine is different)
}

#footer, .push
{
    height: 60px;   (This is jus the height of MY footer, change this to whatever size your footer is)
}

HTML页脚贴在窗口的底部

2 个答案: