Липкий нижний колонтитул, а точнее: содержимое не растягивается до нижнего колонтитула - PullRequest
6 голосов
/ 22 февраля 2012

Итак, я хотел, чтобы на странице был липкий нижний колонтитул, и получил этот , чтобы он работал на меня.Все хорошо, но нет, не совсем ..

Проблема в том, что я хотел, чтобы содержимое над нижним колонтитулом простиралось до самого конца.Теперь блок с основным содержимым заканчивается сразу после текста в блоке, и между нижним колонтитулом и содержимым остается большое пространство.То, что я хочу, это фон основного контента, чтобы растянуть вниз до нижнего колонтитула!Смотрите мое красивое изображение!

footerproblem

Это то, что я сейчас имею в html:

<div id="wrap">
  <!-- start header -->
    <div id="header">
      <div id="header-content">
      </div>
    </div>
  <!-- end header -->

  <!-- start main -->
  <div id="main">
    <div id="main-content">
    </div>
    </div>
  <!-- end main -->
</div>
<!-- start footer -->
<div id="footer">
</div>

И в css:

html {
   height: 100%; }

body {
  height: 100%;}

 /* wrap */
 #wrap {
   min-height: 100%; }

/* main */
 #main {
   background-color: #43145c;
   overflow: auto;
   padding-bottom: 50px; }

 #main-content {
   width: 720px;
   margin: auto;
   background-color: #643280;
   padding-top: 20px; }

#footer {
  position: relative;
  margin-top: -50px;
  height: 50px;
  clear: both;
  background: red; }

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

Имеет ли это какой-то смысл?Кто-нибудь может помочь?

Ответы [ 4 ]

3 голосов
/ 02 сентября 2012

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

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

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

Кроме того, если вы хотите добавить рамку вокруг вашего содержимого div и надеетесь, что оно распространяется на нижний колонтитул, даже если содержимое было маленьким, вы облажались (хотя на самом деле не так, я, наверное, могу подумать о хаке или двух, чтобы сделать это работоспособным), так что это работает, только если вы надеялись добавить фон или градиент и т. д.

Вы можете видетькод в действии здесь: http://jsfiddle.net/qHAxG/ Разверните раздел результатов по горизонтали, чтобы более четко увидеть, что происходит.

1 голос
/ 22 февраля 2012

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

HTML

<body>
  <div id="wrap">
    <!-- start header -->
    <div id="header">
      <div id="header-content">
      </div>
    </div>
    <!-- end header -->

    <!-- start main -->
    <div id="main">
      <div id="main-content">
      </div>
    </div>
    <!-- end main -->

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

  <!-- start footer -->
  <div id="footer">
  </div>
</body>

CSS

        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
          height: 100%;
        }

        /* wrap */
        #wrap {
            background: green;
            height: auto !important;
            margin: 0 auto;
        }

        #wrap,
        #main, 
        #main-content {
            margin-bottom: -50px;
            min-height: 100%;
            height: 100%;

        }

        /* main */
        #main {
            background-color: #43145c;
        }

        #main-content {
            width: 720px;
            margin: 0 auto;
            background-color: #643280;
        }

        .push, #footer {
            height: 50px;
        }

        #footer {
            position: relative;
            background: red;
        }​
1 голос
/ 22 февраля 2012

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

Замените ваши стили HTML и BODY в Таблице стилей на:

html,body {height: 100%;}

Затем замените свою "обертку" на:

#wrap { min-height: 100%;<br> height: auto; }

Надеюсь, что поможет.

0 голосов
/ 22 октября 2012

см. ЭТО демо: это может быть полезно. Кажется, вы хотите, чтобы div с фоновым цветом растянулся на дно. Но проблема с липким нижним колонтитулом заключается в том, что он также остается внизу - убирайся с дороги, когда контент выходит за пределы порта просмотра. Так что нужно определенное расстояние (высота содержимого), чтобы знать, как и когда это сделать. Если эта высота не обозначена фактическим содержанием ... 100% на самом деле тоже не сработает. потому что тогда «липкий» нижний колонтитул действительно не работает ... он был бы за кадром. Что это на самом деле 100%?

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...