フレックスフッターはChromeの一番下には残りません

Question

flexboxを使用して、コンテンツがビューポートよりも短い場合にのみ、フッターを下に留めるようにしています。背が高い場合は、フッターをコンテンツの下に置いて、スクロールする必要があります。

これはFirefoxとEdgeでは正しく動作しますが、ChromeやIEでは正しく動作しません。

Chromeでは、表示されるように、コンテンツよりもビューポートを短くすると、フッターがビューポートの下部に「固まった」ままになります。スクロールすると、ページの上にフッタースクロールが表示されます。

私は問題がcontentContainerであると考えている：それは代わりに、コンテンツ自体のスクロールバーを持つことができるように

#contentContainer { 
    display: flex; 
    flex-direction: column; 
    overflow: auto; 
    height: 100%; 
    width: 100%; 
} 

このdivが、コンテンツとフッターを保持しています。しかし、私は本当にそれが間違っているか分からない。

html, 
 
body, 
 
#app { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#app, 
 
#appContainer { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
} 
 
#header { 
 
    background-color: #dddddd; 
 
    width: 100%; 
 
    min-height: 36px; 
 
    height: 36px; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
#contentContainer { 
 
    display: flex; 
 
    flex-direction: column; 
 
    overflow: auto; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#content { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
} 
 
#footer { 
 
    display: flex; 
 
    flex-direction: row; 
 
    background-color: #dddddd; 
 
    height: 20px; 
 
    min-height: 20px; 
 
    width: 100%; 
 
}

<div id="app"> 
 
    <div id="appContainer"> 
 
    <div id="header">Header</div> 
 
    <div id="contentContainer"> 
 
     <div id="content"> 
 
     <p>Content</p> 
 
     <p>Content</p> 
 
     <p>Content</p> 
 
     <p>Content</p> 
 
     <p>Content</p> 
 
     </div> 
 
     <div id="footer">Footer</div> 
 
    </div> 
 
    </div> 
 
</div>

デモJSFiddle。

Answer 1

このようにしてみは、これはあなたが

https://jsfiddle.net/wzz703da/

html, body, #app 
{ 
    padding: 0; 
    margin: 0; 
} 

#app, #appContainer 
{ 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
} 

#header 
{ 
    background-color: #dddddd; 
    width: 100%; 
    min-height: 36px; 
    height: 36px; 
    display: flex; 
    flex-direction: row; 
} 

#contentContainer 
{ 
    display: flex; 
    flex-direction: column; 
    flex: 1; 
    overflow: auto; 
    height: 100%; 
    width: 100%; 
} 

#content 
{ 
    display: flex; 
    flex-direction: column; 
    flex: 1; 
} 

#footer 
{ 
    display: flex; 
    flex-direction: row; 
    background-color: #dddddd; 
    height: 20px; 
    min-height: 20px; 
    width: 100%; 
} 

Answer 2

を探している私は、MIN-幅をする幅のプロパティcontentContainerを変更しようとしている、とコンテンツ何を願って - に曲がり、シュリンク0：

html, 
 
body, 
 
#app { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#app, 
 
#appContainer { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
} 
 
#header { 
 
    background-color: #dddddd; 
 
    width: 100%; 
 
    min-height: 36px; 
 
    height: 36px; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
#contentContainer { 
 
    display: flex; 
 
    flex-direction: column; 
 
    overflow: auto; 
 
    width: 100%; 
 
    min-height: calc(100vh - 36px); 
 
} 
 
#content { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-basis: auto; 
 
    flex-grow: 1; 
 
    flex-shrink: 0; 
 
} 
 
#footer { 
 
    display: flex; 
 
    flex-direction: row; 
 
    background-color: #dddddd; 
 
    height: 20px; 
 
    min-height: 20px; 
 
    width: 100%; 
 
}

<div id="app"> 
 
    <div id="appContainer"> 
 
    <div id="header">Header</div> 
 
    <div id="contentContainer"> 
 
     <div id="content"> 
 
     <p>Content</p> 
 
     <p>Content</p> 
 
     <p>Content</p> 
 
     <p>Content</p> 
 
     <p>Content</p> 
 
     </div> 
 
     <div id="footer">Footer</div> 
 
    </div> 
 
    </div> 
 
</div>