Исправлен нижний колонтитул внизу страницы или под текстом [дубликата]

Question

Исправлен нижний колонтитул внизу страницы или под текстом [дубликата]

0

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

Это мой код: http://jsfiddle.net/9XjLL/

HTML:

<body>
    <div id="header">
        This is the header
        <hr>
    </div>

    <div id="menu">
        <br>
        <b>Menu</b><br>
        <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
        </ul>
        <br>
    </div>
    <div id="body">
        <p> body </p>
        <p> body </p>
        <p> body </p>
        <p> body </p>
        <p> end </p>
    </div>
</body>
<footer>
    Footer
</footer>

CSS:

html, body { 
    height:         100%; 
    background:     #E6E6E6;
    margin:         0;
    padding:        0;
}

#header {
    text-align:     center;
    height:         50px;
    position:       static;
    top:            0px;
    z-index:        15;
    background:     #B2B2B2;
}

#body{
    text-align:     left;
    margin-left:    210px;
    margin-right:   200px;
    margin-bottom:  5px;
    background:     #B2B2B2;
}

#menu {
    width:          200px;
    text-align:     left;
    left:           0px;
    position:       absolute;
    background:     #B2B2B2;
}

footer {
    text-align:     center;
    height:         30px;
    position:       relative;
    bottom:         0; 
    width:          100%;
    background:     #B2B2B2;
}

Вероятно, это будет что-то глупое, но я не могу понять это...

Заранее спасибо!

Fingashpitzzz 20 янв. 2014, в 14:58

Источник

4

У вас была возможность взглянуть на Sticky Footer Райана Фейта ?
Hashem Qolami 20 янв. 2014, в 13:17
0

Проверьте мой ответ здесь: http://stackoverflow.com/questions/20370396/align-div-to-bottom-of-the-page/20370880#20370880
Ruddy 20 янв. 2014, в 13:22
0

Следующая ссылка может помочь вам в решении этой проблемы. [Положение нижнего колонтитула css] [1] [1]: stackoverflow.com/questions/21155833/footer-position-issue-css/…
Green Wizard 20 янв. 2014, в 13:31

Показать ещё 1 комментарий

Теги:

html

css

containers

footer

2 ответа

0

Вы можете обратиться к этому ниже.

body{
   margin:0px;
   background:#000;
}
.footer-cont {
   width:100%;
   position:fixed;
   bottom:0px;
}
.footer {
   height:50px;
   background:#F0F0F0;
   border:1px solid #CCC;
   width:960px;
   margin:0px auto;
}
.content {
   width:960px;
   background: #F0F0F0;
   border: 1px solid #CCC;
   height: 2000px;
   margin: 70px auto;
}

D. WONG 20 янв. 2014, в 11:41

Ещё вопросы

У вас была возможность взглянуть на Sticky Footer Райана Фейта ?
Проверьте мой ответ здесь: http://stackoverflow.com/questions/20370396/align-div-to-bottom-of-the-page/20370880#20370880
Следующая ссылка может помочь вам в решении этой проблемы. [Положение нижнего колонтитула css] [1] [1]: stackoverflow.com/questions/21155833/footer-position-issue-css/…

Fingashpitzzz · Accepted Answer · 2014-01-21T07-41-00.000Z

Я нашел своеобразное решение. Я добавил/изменил следующие строки:

#body{ 
   min-height: 83%;
}

footer{
   position: static;
}

Спасибо всем за помощь!