HTML нижний колонтитул придерживаться нижней части окна - PullRequest
Новая
       7

HTML нижний колонтитул придерживаться нижней части окна

0 голосов
/ 27 августа 2011

Я пишу веб-приложение и пытаюсь заставить нижний колонтитул придерживаться нижней части окна.Когда содержимое больше, чем окно, нижний колонтитул опускается вниз.Есть ли в любом случае заставить его придерживаться нижней части окна и позволить прокрутить содержимое ??

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>

Ответы [ 2 ]

1 голос
/ 27 августа 2011

Попробуйте это: 

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

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

        background-color: red;
    }
0 голосов
/ 30 августа 2011

Поместите все в 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)
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...