Хочу, чтобы нижний колонтитул оставался внизу, но не абсолютным

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

    #footerWrapper {
 height: 177px;
 bottom: 0;
 position: absolute;
 width: 100%;
 }

Это делает то, что я хочу, так как заставляет нижний колонтитул идти вниз страницы независимо от того, какой размер экрана. однако, когда я сворачиваю экран и поднимаю его, он остается абсолютным, следовательно, остается на этой 1 странице.

так как я хотел бы, чтобы он оставался на странице, а не в нижнем колонтитуле.

есть идеи.

Источник

5 ответов

Решение

Я был в состоянии держать нижний колонтитул липким и не перегнать заголовок, используя z-index. Просто дайте более высоким DIV более высокие z-индексы.

    #headWrapper {
        padding-bottom: 0px;
        position: relative;
    }
    #headWrapper {
        z-index: 2;
    height: 160px;
        /* width: 960px; */
        margin: 0 auto;
        background: url(/images/PageImages/homeHeadBack.png) repeat-x;
    }

    #footerWrapper {
        background: url(/images/PageImages/footerBack.png) repeat-x;
        height: 177px;
        position: absolute;
        width: 100%;
        bottom: 0;
        z-index: 1;
    }

Обратите внимание, что #headWrapper необходимо указать положение: относительное. Я думаю, вы можете начать с этого. Работал на Chrome.

Источник

Я использую это, и он отлично работает, на мобильных телефонах тоже...

HTML:

<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</body>

CSS:

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    padding:10px;
    background:#5ee;
}
#content {
    padding:10px;
    padding-bottom:80px; /* Height of the footer element */
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}

источник:

http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

демо:

http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/

Источник

Попробуй это.

HTML:

<html>
<head>

    <link rel="stylesheet" href="layout.css" ... />

</head>

<body>

    <div class="wrapper">

        <p>Your website content here.</p>

        <div class="push"></div>

    </div>

    <div class="footer">

        <p>Copyright (c) 2014</p>

    </div>

</body>

</html>

CSS:

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

для получения дополнительной информации.

Источник

Хорошо, я не уверен, но я понимаю, что вы пытаетесь достичь

#footerWrapper {
   background: url(/images/PageImages/footerBack.png) repeat-x;
   height: 177px;
   position: fixed;
   width: 100%;
   bottom: 0px;
}

#contentWrapper {
   background: url(/images/PageImages/contentTopBack.png) no-repeat center top;
   min-height: 208px;
   margin-bottom: 177px;
}

Если это не исправит, то я не понимаю, к чему вы стремитесь.

Источник

Попробуй это

#footerWrapper{
    position: fixed;
}

#contentWrapper{
    margin-bottom: 177px; // height of the footer
}
Источник
Другие вопросы по тегам