Двойной фиксированный верхний и нижний колонтитулы - желательно динамический

Question

Я не уверен, что то, что мне нужно, даже можно сделать, но я бы хотел, чтобы гибкое (или CSS, включая расположение таблицы, если это будет работать) решение обеспечивало бы двойной фиксированный (фиксированный - не липкие) верхние и нижние колонтитулы следующим образом:

***header one - fixed - dynamic height*** 
***header two - fixed - dynamic height*** 
***content - scrolls as needed*** 
***fixed one - fixed - dynamic height*** 
***footer two - fixed - dynamic height*** 

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

Любые мысли приветствуются!

Answer 1

Здесь, я думаю, это работает.

Вы должны иметь максимальную высоту, иначе столбец будет расширяться, я выбрал 100vh.

Codepen Demo

Я предполагаю, что вы не означает, что заголовки/колонтитулы были position:fixed как они бы тогда из потока документа и не может повлиять на высоту, не являющихся расположением элементов.

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

Я добавил «расширенный» наведение в раздел содержимого, чтобы вы могли видеть эффект переполнения.

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.container { 
 
    height: 100vh; 
 
    max-height: 100vh; 
 
    width: 80%; 
 
    margin: auto; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
div { 
 
    flex: 0 0 auto; 
 
} 
 
.one { 
 
    background: lightblue; 
 
} 
 
.two { 
 
    background: lightgreen; 
 
} 
 
main { 
 
    flex: 1 1 auto; 
 
    overflow-Y: auto; 
 
    background: pink; 
 
} 
 
main:hover .expander { 
 
    height: 1000px; 
 
} 
 
p { 
 
    padding: 0 1em; 
 
    margin: 0;

<div class="container"> 
 
    <div class="header one"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, alias mollitia. Laborum et cupiditate</p> 
 
    </div> 
 
    <div class="header two"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex excepturi molestiae voluptates nesciunt, recusandae error,</p> 
 
    </div> 
 
    <main> 
 
    <div class="expander"></div> 
 
    </main> 
 
    <div class="footer one"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur incidunt, esse quaerat illum ipsa. Reiciendis corrupti aliquid placeat</div> 
 
    <div class="footer two"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum rerum tempore dolor tenetur expedita eligendi nemo numquam veniam laboriosam.</p> 
 
    </div> 
 
</div>