Содержание под нижним колонтитулом

У меня возникли проблемы с делением страницы на header, content и footer. Я следил за одной из тем здесь в stackoverflow. Однако, когда я пытаюсь добавить что-либо в часть содержимого, весь мой контент отображается ниже элемента footer. Пока это мой код.Содержание под нижним колонтитулом

Может ли кто-нибудь объяснить, что я делаю неправильно, и в чем причина этого?

HTML

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     //Removed 
    </head> 
    <body> 
     <div class="main-wrapper"> 
      <header> 
       <?php 
       require('header.php'); 
       ?> 
      </header> 
      <section class="page-content"> 
       yeah 
      </section> 
      <footer> 
       <?php 
       include('footer.php'); 
       ?> 
      </footer> 
     </div> 
    </body> 
</html>

Вот мой CSS

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

    .main-wrapper { 
    box-sizing: border-box; 
    min-height: 100%; 
    padding: 0; 
    position: relative; 
    } 

    article { 
    background-color: white; 
    } 

    footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background-color: #555; 
    height: 55px; 
    } 
    .page-content { 
    width: 100%; 
    height: 100%; 
    } 

    .nav-bar { 
    width: 100%; 
    background: white; 
    text-align: center; 
    }

страница-содержимое отображается ниже сноске, даже когда я установил его позицию в абсолюте. Что я делаю не так? Благодарим вас за помощь.

источник

2016-08-18 davidb

Попробуйте удалить 'высоту: 100%;' со страницей-контент? Возможно, он пытается заполнить всю оболочку страницы. – DrSatan1

Вы должны добавить

<div style="clear:both;"></div>

между Вашей секцией и нижним колонтитулом тегом и посмотреть, если это помогает

источник

2016-08-18 20:36:48 DomGato

Привет, просто деньги, что что-то не так с моим заголовком. Я добавляю его с помощью php. Однако, когда я удаляю php-код и просто набираю текст, он работает. Думаю, мне нужно это исправить. Однако в этом не должно быть ничего плохого. Спасибо, в любом случае. – davidb

Эй, рад слышать, что вы разобрались с заголовком. Что касается PHP, вы дважды проверили PHP-код, который вы втягиваете? Возможно, есть тег, который не закрыт или что-то в этом роде. – DomGato

.page-content { 
    box-sizing:border-box; 
    padding:0 0 55px; /* make space for footer */ 
}

источник

2016-08-18 20:47:35 Maju

Содержание под нижним колонтитулом

ответ

Смежные вопросы