Липкий заголовок и нижний колонтитул с контентом для автопрокрутки

Question

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

Я успешно выполнил его, на этом кодексе: http://codepen.io/DlafCreative/pen/wzdOEN inpired из другого.

Проблема заключается в том, что HTML разметка не удобно с фреймворком я использую (Angular2), так как <header> находится на том же уровне, что <main> и <footer> находится вне <prop-wrapper>.

В моем приложении заголовок должен оставаться неизменным на всех страницах, тогда как нижний колонтитул должен быть динамическим. Так что я хотел бы оказывает <header> до <prop-wrapper> и <footer> после <main>, как это раздвоенная codepen: http://codepen.io/DlafCreative/pen/xEAXxy Таким образом, я мог бы легко определить содержание

Теперь, я борюсь, чтобы получить такое же поведение с этим разметки. Помощь будет приветствоваться! Thx много :)

Answer 1

Это может вам помочь. Итак, как это работает, приводится ниже:

1. Прежде всего, удалить поля по умолчанию в браузере с помощью:

   body { 
       margin: 0; 
   } 
   

2. Сделайте prop-bodyflexbox с помощью display: flex. Вы дадите flex-direction: column, чтобы сделать его гибким по вертикали. Для того, чтобы заполнить всю высоту экрана дают height: 100vh:

   prop-body { 
       display: flex; 
       flex-direction: column; 
       height: 100vh; 
   } 
   

3. Добавить flex: 1 в prop-wrapper так, что оно заполняет пространство между header и footer.

   Это сокращенная, что означает:

   а. flex-grow является 1 b. flex-shrink is 1

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

См. flex: 1 Значение here.

гибкого трубопровод: Эквивалентное изгибаться: 1 0. Делает гибкий элемент гибким и устанавливает гибкую основу к нулю, в результате чего элемента, который получает указанную долю свободного пространства в контейнере гибкого трубопровода. Если все элементы в гибком контейнере используют этот шаблон, их размеры будут пропорциональны указанному коэффициенту гибкости .

4. Теперь вы можете легко увидеть макет - мы используем некоторые вложенные flexboxes.

body { 
 
    margin: 0; 
 
} 
 
prop-body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
} 
 
prop-body header { 
 
    background: grey; 
 
    padding: 20px; 
 
} 
 
prop-body prop-wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    background: lightblue; 
 
    flex: 1; 
 
} 
 
prop-body prop-wrapper main { 
 
    overflow-y: auto; 
 
    flex: 1; 
 
} 
 
prop-body prop-wrapper main p { 
 
    padding: 50px; 
 
} 
 
footer { 
 
    display: flex; 
 
    background: pink; 
 
    min-height: 50px; 
 
    height: 10vh; 
 
} 
 
footer .footer-content { 
 
    flex: 1; 
 
    background: plum; 
 
}

<prop-body> 
 
    <header>Header</header> 
 
    <prop-wrapper> 
 
    <main> 
 
     <p>CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
 
     CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</p> 
 
    </main> 
 
    <footer> 
 
     <div class="footer-content"> 
 
     Footer 
 
     </div> 
 
    </footer> 
 
    </prop-wrapper> 
 
</prop-body>