フレックスボックスの本体とメインの最小高さ

https://jsfiddle.net/vz7cLmxy/フレックスボックスの本体とメインの最小高さ

私は身体を拡張しようとしていますが、最小高さは機能しません。私は他の関連する話題を読んだが、その周りに頭を浮かべることはできない。

HTML体内

<div class="menu">Menu</div> 

<div class="wrap"> 
    <div class="sidebar">Sidebar</div> 
    <div class="main">Main</div> 
</div> 

<div class="footer">Footer</div>

CSS

body, 
html { 
    padding: 0; 
    margin: 0; 
    min-height: 100%; 
} 

body { 
    display: flex; 
    background: #eee; 
    flex-direction: column; 
} 

.menu { 
    background: red; 
    color: #fff; 
    padding: 10px; 
} 
.wrap { 
    display: flex; 
} 
.sidebar { 
    background: #ddd; 
    width: 300px; 
} 
.main { 
    background: #ccc; 
    flex: 1; 
} 
.footer { 
    background: #000; 
    color: #fff; 
    padding: 10px; 
}

期待される結果は、メインは、それが100％未満だ場合の高さを埋めるために随分されていることです。中心要素で

出典

2016-05-25 Jens Törnell

は非常に似て見えます：http://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with- css-using-displayflex/25098486 –

使用flex: 1：

.Site { 
 
    display: flex; 
 
    min-height: 100vh; 
 
    flex-direction: column; 
 
} 
 

 
.Site-content { 
 
    flex: 1; 
 
    background-color:#bbb; 
 
}

<body class="Site"> 
 
    <header>This is the header text ☺</header> 
 
    <main class="Site-content">…</main> 
 
    <footer>This is the footer text ☻</footer> 
 
</body>

出典

2016-05-25 08:26:33 Randy

ありがとう！フレックス：1を設定して（私の場合は）折り返しを設定し、html（最小高さではなく）で幅：100％を持つ組み合わせがトリックでした！ –

IE11では動作しません... – ssougnez

フレックスボックスの本体とメインの最小高さ

答えて

関連する問題