Заполнение путаницы цветом фона

Question

У меня проблема с фоном нижнего колонтитула. Похоже, высота #pagefooter равна 0, а цвет фона применяется только к отступу, по вертикали которой 2x 25 пикселей.

Я пробовал несколько вещей, но я не нашел решения. Что здесь не так?

/// HTML-

<div id="pagefooter"> 
    <footer> 
     <nav id="f1" class="footernav"> 
      <h1>Misc</h1> 
      </br> 
      <ul> 
       <li> 
        <a href="#">Lorem</a> 
       </li> 
       <li> 
        <a href="#">ipsum</a> 
       <li> 
       <li> 
        <a href="#">dolor</a> 
       </li> 
       <li> 
        <a href="#">sit</a> 
       </li> 
       <li> 
        <a href="#">amet</a> 
       </li> 
      </ul> 
     </nav> 
     <nav id="f2" class="footernav"> 
      <!-- SOME MENU --> 
     </nav> 
     <nav id="f3" class="footernav"> 
      <!-- SOME MENU --> 
     </nav> 
     <nav id="f4" class="footernav"> 
      <!-- SOME MENU --> 
     </nav> 
    </footer> 
</div> 

/// CSS

#pagefooter { 
    background-color: #1a1a1a; 
    padding:25px 100px; 
} 
.footernav { 
    float:left; 
    width:25%; 
    margin-bottom: 35px; 
} 

Вот пример: http://jsfiddle.net/AR3AC/

Answer 1

В принципе, #pagefooter содержит только плавающие элементы, которые не имеют высоты (и, следовательно, не имеют цвета фона). Чтобы обойти эту проблему, установите свойство переполнения авто:

#pagefooter { 
    background-color: #1a1a1a; 
    padding: 25px 100px; 
    overflow: auto; 
} 

Answer 2

Высота PageFooter никогда не устанавливается, насколько я могу рассказать. Добавьте строку в #pagefooter так как это явно указать высоту вы хотите:

#pagefooter { 
    background-color: #aaa; 
    height: 100px; 
    padding:25px 100px; 
} 

Я не уверен, что ответ на ваш вопрос, но это хорошее место, чтобы начать.

Answer 3

Теперь и тогда я получу проблемы с переполнением: авто. В случае, если вы это сделаете, еще один способ справиться с этим - поставить пустой очищающий div прямо перед этим. Это может быть только <div style="clear:both"></div>. (Обычно я делаю класс «.clear», который имеет четкое представление: и то, и другое. Упрощает эту проблему, просто тестируя с помощью <div class="clear"></div>, чтобы узнать, являются ли проблемы с плавающей точкой.