2
我對「聖盃」的佈局有一個曲折，你會注意到#main有一個min-height: 800px。我真正想要的是100％的高度，然後當我在section內添加內容時，剩下的佈局繼續下去（就像它現在一樣）。Flexgrid聖盃百分之百高度
任何想法如何實現這一點，100％的高度，而不是明確設置800px？
body {
font: 24px Helvetica;
background: #999999;
margin: 0;
padding: 0;
height: 100%;
}
#main {
min-height: 800px;
margin: 0;
padding: 0;
display: flex;
flex-flow: row;
}
#main>article {
border: 1px solid #cccc33;
background: #dddd88;
flex: 3 1 60%;
order: 3;
}
#main>nav {
border: 1px solid #8888bb;
background: #ccccff;
flex: 1 6 70px;
order: 1;
max-width: 70px;
min-width: 70px;
}
#main>aside {
border: 1px solid #8888bb;
background: #ccccff;
flex: 1 6 300px;
order: 2;
max-width: 300px;
min-width: 300px;
}
header {
display: block;
padding: 5px;
min-height: 70px;
border: 1px solid #eebb55;
background: #ffeebb;
}
section {
margin: 10px;
}
.container {
margin: 0;
padding: 0;
display: flex;
flex-flow: row;
}
.container>.field {
width: 100%;
background: #dddd88;
order: 2;
}
.container>.left {
width: 4px;
background: black;
order: 1;
}
.container>.right {
width: 4px;
background: black;
order: 3;
display: flex;
}
.top,
.bottom {
display: block;
height: 4px;
background: red;
}<div id='main'>
<article>
<header>header</header>
<section>
<div class="top"></div>
<div class="container">
<div class="field">
Sub Container w/ borders
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</section>
</article>
<nav>nav</nav>
<aside>aside</aside>
</div>
什麼'最小高度：100vh'呢？ https://jsfiddle.net/fwmgxxy0/ –
我不明白這個問題。你可以編輯你的問題，並添加更多的解釋？ – Goose
什麼*的100％身高？ @Michael_B在正確的軌道上。身高100％很難通過使用百分比來實現 - 它不像您期望的那樣行事。 –