2列レイアウトの固定フッターの位置

Question

この投稿はthis oneの更新版です。私は私の問題を他のポストよりも良く説明しようとします。この問題は、2つの状況でフッターの位置に関連しています。

状況1：

体の内容は、ブラウザの高さを満たすのに十分でないとき、第1の状況があるので、フッタはの下部に固定されなければなりませんブラウザ。

状況2：

体の含有量の高さが高く、オーバーフローである場合に第2の状況です。ここでは、フッターを下部に固定することは望ましくないので、フッターはコンテンツの下部になければなりません。

フィドルの例への最初のアプローチとリンクは、上記のリンクの他の投稿と同じです。

ところで、私はこれがJavascriptを使用して達成できることを知っていますが、私はCSSルールだけを使用したいと思います。何か案が？私は、ネストされたフレキシボックス、以下の例を使用することをお勧め

Answer 1

：なぜあなたはこれを継続していなかった

jsFiddle

body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
    margin: 0; 
 
} 
 
.container { 
 
    flex: 1; 
 
    display: flex; 
 
} 
 
.content { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
}

<div class="header">header</div> 
 
<div class="container"> 
 
    <div class="sidebar">sidebar</div> 
 
    <div class="content"> 
 
    <div class="main"> 
 
     conent<br>conent<br>conent<br>conent<br>conent<br> 
 
     conent<br>conent<br>conent<br>conent<br>conent<br> 
 
     conent<br>conent<br>conent<br>conent<br>conent<br> 
 
     conent<br>conent<br>conent<br>conent<br>conent<br> 
 
    </div> 
 
    <div class="footer">footer</div> 
 
    </div> 
 
</div>