Подтвердить что ты не робот

Фон нижнего колонтитула должен простираться до нижней части браузера

У меня проблема с фиксацией нижнего колонтитула в нижней части браузера. Проблема заключается в том, что при изменении разрешения или изменении окон содержимое нижнего колонтитула перекрывает содержимое веб-сайта, вот текущий css для нижнего колонтитула

div.footer {
        position:absolute;
        bottom:0px;
    }

Кто-нибудь знает, как я могу это исправить? Спасибо вам

UPDATE:

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

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

ОБНОВЛЕНИЕ II

Мой сайт имеет динамический контент, поэтому я думаю, что не могу использовать этот вид CSS Sticky footer, потому что иногда на веб-сайте будет только несколько строк, иногда они будут упакованы с контентом. Вот почему нижний колонтитул не прилипает к нижней части веб-страницы. Его проблема не связана с нижним колонтитулом, если на веб-сайте имеется много контента.

4b9b3361

ОТВЕТЫ

Ответ 1

То, что у вас есть, является общей проблемой, для которой нет общего ответа, но что бы я попытался, если бы был вами, поскольку все эти вышеприведенные предложения, по-видимому, не работают, я попытался бы установить фон страницы страницы любой цвет пусть скажем белый (#FFFFFF), и я бы установил цвет фона тела на любой другой, а затем белый, пусть серый (#CCCCCC). И окончательно установите положение нижнего колонтитула относительно, и, конечно же, он должен быть размещен после всего, если вы хотите, чтобы он всегда был внизу. Таким образом, вы получите то, что вам нужно на 100%, если вы будете следовать пошаговым инструкциям.

Ответ 2

Оформить заказ CSS Sticky Footer для отличного кросс-браузерного метода.

Что делает этот сайт по существу, это сделать нижний колонтитул BENEATH краем браузера и дает ему отрицательный запас, который имеет то же значение, что и высота нижнего колонтитула. Таким образом, нижний колонтитул обязательно будет придерживаться нижней части.

Ответ 3

Вы можете добавить push div к последнему элементу перед нижним колонтитулом, чтобы всегда гарантировать, что нижний колонтитул не перекрывает содержимое.

В этом примере:

<html>
  <body>
    <div class="header" />
    <div class="content" />
    <div class="footer_push" />
    <div class="footer" />
  </body>
</html>

Если <div class="footer" /> всегда 75px высокий, используйте следующий CSS:

html, body { height: 100%; } /* Take all available vertical space */

/* Push the bottom of the page 75px.
   This will not make scrollbars appear
   if the content fits already. */
.footer_push { height: 75px; }

/* Position the footer */
.footer { position: absolute; bottom: 0; height: 75px; }

Ответ 4

В основном вам нужно дать нижнему колонтитул фиксированный height и нажать нижний колонтитул с другим div той же высоты на дно. Там, тем не менее, более специфичные для браузера материалы, которые необходимо учитывать:

  • html и body должны, кроме того, иметь высоту 100% нет (по умолчанию), чтобы избежать нижнего колонтитула ниже этого значения.
  • Элементы p и div на всей странице должны иметь нет margin-top, чтобы нижний колонтитул не был подтолкнут ниже этого количества верхних полей в каждом Firefox.
  • "container" div должен использовать min- height 100% вместо height, чтобы избежать перекрытия нижнего колонтитула оставшегося содержимого. IE6, который не знает min-height, отлично работает с height, поэтому вам нужно добавить к нему * html.

Все со всеми, здесь SSCCE, просто скопируйте'paste'n'run it:

<!doctype html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
        <title>SO question 1900813</title>
        <style>
            html, body {
                margin: 0;
                height: 100%;
            }
            p, div {
                margin-top: 0; /* Fix margin collapsing behaviour in FF. Use padding-top if necessary. */
            }
            #container {
                position: relative;
                min-height: 100%;
            }
            * html #container {
                height: 100%; /* This is actually "min-height" for IE6 and older. */
            }
            #pushfooter {
                height: 50px; /* Must be the same as footer height. */
            }
            #footer {
                position: absolute;
                bottom: 0;
                height: 50px;
            }      
        </style>
    </head>
    <body>
        <div id="container">
            <p>Some content</p>
            <div id="pushfooter"></div>
            <div id="footer">Footer</div>
        </div>
    </body>
</html>

Изменить: после большего тестирования я понял, что это действительно работает не в IE8 (я все еще считаю его бета-версией, поэтому я действительно не использовал/не тестировал его, извините за это), если вы не позволите сделать это в модуле совместимости IE7 (добавьте smilie здесь), добавив следующий метатег в <head> (который я уже добавил в SSCCE здесь выше):

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

или разрешить рендеринг в режиме quirks с помощью "неправильного" типа doctype (либо удалить <!doctype>, либо выбрать одну из дотиформ, связанных с мучительно красными блоками Q в IE здесь). Но я бы этого не делал, у него было больше негативных побочных эффектов.

И, что удивительно, сайт http://www.cssstickyfooter.com, как упоминал здесь здесь еще один человек, который использовал совершенно другой подход, также сделал не работаем в IE8 здесь (попробуйте изменить размер окна браузера по оси Y, нижний колонтитул не будет двигаться вдоль него, в отличие от других браузеров, включая IE6/7). Этот браузер меня удивляет. На самом деле.

Ответ 5

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

Ответ 7

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

div.footer{
    position: fixed;
    bottom: 0;
}

Не забудьте получить прописку на нижней части тела (или в контейнере, чтобы люди могли прокручивать нижнюю часть текста). Основная проблема здесь в том, что при изменении размера все будет перекрываться.

Если вы просто хотите иметь нижний колонтитул с фоновым изображением/цветом, который простирается до конца (для страниц, которые не являются полной высотой страницы), вы можете попытаться использовать принцип искусственного столбца или даже попытаться дать ваше тело - цвет фона вашего нижнего колонтитула и исправьте заголовок/содержимое фона.

Сегодня я наткнулся на эту страницу: http://www.xs4all.nl/~peterned/examples/csslayout1.html

Может быть полезно

Ответ 8

попробуйте следующее:

#wpr{
    display: table;
    height:  100%;
    width:   100%;
}
.dsp-tr{
    display: table-row;
}
.dsp-tc{
    display: table-cell;
}
#ftr-cnr{
    text-align:     center;
    vertical-align: middle;
}
#ftr{
    background-color: red;
    padding:          10px 0px;
    font-size:        24px;
}


<div id="wpr">
  <div class="dsp-tr">
    <div class="dsp-tc">
      body
    </div>
  </div>
  <div class="dsp-tr">
    <div class="dsp-tc" id="ftr-cnr">
      <div id="ftr">
        footer
      </div>
    </div>
  </div>
</div>

display: таблица не делает ее таблицей, а <div> по-прежнему является <div>, она просто сообщает браузеру отображать ее как таблицу. я протестировал его в chrome и firefox сообщите мне, если это сработает для вас.

Ответ 9

У нас была эта проблема несколько раз. Мы не смогли найти решение только для браузера CSS. Мы наконец прибегли к JQuery. Мы написали свои собственные (я не могу публиковать), но этот http://www.hardcode.nl/archives_139/article_244-jquery-sticky-footer.htm выглядит многообещающим:

$(function(){
    positionFooter(); 
    function positionFooter(){
        if($(document.body).height() < $(window).height()){
            $("#pageFooterOuter").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#pageFooterOuter").height())+"px"})
        }   
    }

    $(window)
        .scroll(positionFooter)
        .resize(positionFooter)
});

Ответ 10

У вас есть объявление DOCTYPE в верхней части вашего HTML?

Если это так, есть хороший шанс, что у меня есть решение для вас.

Я пытался сделать высоту: таблица 100% или div (предполагая, что это основной краеугольный камень расширившейся функции нижнего колонтитула)

Независимо от того, что я сделал, высота 100% не срабатывала! элементы просто не растягивались...

Я сузил его до очень простого HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test1</title>
</head>
<body>
<div style="border: 2px solid red; height: 100%">Hello
World</div>
</body>
</html>

но DIV не растягивался полностью (100% игнорировалось). Это справедливо и для таблиц с равным значением высоты = "100%".

Как отчаянный последний результат, я удалил строку DOCTYPE, в результате чего появился этот код

<html>
<head>
<title>Test1</title>
</head>
<body>
<div style="border: 2px solid red; height: 100%">Hello
World</div>
</body>
</html>

И это сработало!

Я уверен, что есть хорошее объяснение, но мне действительно было все равно, так как он решил проблему.

Обновление

См. соответствующий question (заданный мной)

Ответ 11

Я придумал довольно простое решение, в котором не используются хаки высот CSS или все это.

Вы просто установите свой <body> с фоном, который должен иметь нижний колонтитул, а затем поместите все, кроме нижнего колонтитула, в <div> со свойствами, которые вы обычно указываете тегу body.

Это позволяет нижнему колонтитулу "расширить" свой цвет в нижней части страницы, когда имеется короткий динамический контент, без необходимости его разворачивания, когда имеется много динамического контента. У div "virtual body" все еще есть градиент, за которым следует сплошной цвет, а нижний колонтитул скрывается в теге тела, только на коротких страницах. (Отлично работает, если вам нужен сплошной цвет для продолжения после окончания градиента нижнего колонтитула, или если вам нужен только фон, соответствующий цвету нижнего колонтитула)

CSS

body    {background-color: #000; }
#primary_container { background: #FFF url('/images/bgvert.png'); background-repeat: repeat-x; }
#footer { background: #000; }

HTML

<body>
  <div id="primary_container">
    <!-- most content, can be short or long -->
  </div>
  <div id="footer">
    <!-- if primary content + footer is less than browser height, body background color
       displays below this. If it is more, you get normal scroll behavior to the end
       of footer and body background color is never seen -->
  </div>
</body>