ダブル固定ヘッダーとフッター - 好ましくはダイナミック

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と最も近くなってきました幅。私は必要に応じて固定高さを考慮することができますが、動的を好むでしょう。また重要な場合は、ヘッダー2とフッター1がページに表示されないことがあります。

ご迷惑をおかけして申し訳ありません。

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>