4
ブラウザのウィンドウサイズに合わせてアプリを作成しようとしています。フレックスボックスの高さをブラウザウィンドウに制限します（現在、オーバーフローして縦スクロールしています）
メニューの高さは、親の100％に適合し、画面の高さは100％ではありません。私はこれを持っている：
|---------------------------------|
| Header |
|---------------------------------|
||-------------------------------||
|| flex ||
|||--------------| ||
||| Menu | ||
||| | ||
||| 1 item | ||
||| | ||
||| | ||
||| | ||
||| |---------------||
| |
|--------------|
私は
|---------------------------------|
| Header |
|---------------------------------|
||-------------------------------||
|| flex ||
|||--------------| ||
||| Menu | ||
||| | ||
||| 1 item | ||
||| | ||
||| | ||
||| | ||
||| | ||
|||--------------|---------------||
私のコードたい：私はそれを達成するにはどうすればよいhttps://jsfiddle.net/vLbzLtyf/
<div app-context>
<header>
<h1>Application</h1>
</header>
<div class="layout-flex-container row">
<div class="element">
<aside>
<h2>Menu</h2>
<nav>
<ul>
<li>
<span>
<i class="material-icons">person</i>
<a href="#">John Doe</a>
</span>
</li>
<li>
<span>
<i class="material-icons">person</i>
<a href="#">Paul Smith</a>
</span>
</li>
<li>
<span>
<i class="material-icons">person</i>
<a href="#">Jean Dupont</a>
</span>
</li>
<li>
<span>
<i class="material-icons">person</i>
<a href="#">Xavier Lin</a>
</span>
</li>
</ul>
</nav>
</aside>
</div>
html,
body {
height: 100%;
}
body {
margin: 0;
}
div[app-context] {
height: 100%;
}
/* ************************************************************************** */
.layout-flex-container {
display: flex;
align-items: stretch;
flex-wrap: nowrap;
height: 100%;
}
.layout-flex-container.row {
flex-direction: row;
}
.layout-flex-container.row .element {
flex: 0 1 auto;
height: 100%;
}
/* ************************************************************************** */
header {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
box-sizing: border-box;
border: none;
width: 100%;
height: 128px;
margin: 0;
padding-bottom: 64px;
z-index: 3;
background-color: rgb(63, 81, 181);
color: rgb(255, 255, 255);
}
header > h1 {
flex: 1;
box-sizing: border-box;
margin: 0;
padding: 0 40px 0 80px;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 20px;
line-height: 1;
letter-spacing: .02em;
font-weight: 400;
}
/* ************************************************************************** */
aside {
height: 100%;
width: 340px;
background: transparent;
color: #424242;
z-index: 5;
}
aside > h2 {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
box-sizing: border-box;
color: black;
line-height: 64px;
padding-left: 40px;
margin: 0;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 20px;
letter-spacing: .02em;
font-weight: 400;
}
aside > nav {
height: 100%;
background: #fafafa;
padding-top: 16px;
box-sizing: border-box;
}
aside > nav > ul {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
align-items: flex-start;
padding: 8px 0;
margin: 0;
list-style: none;
}
aside > nav > ul li {
box-sizing: border-box;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: .04em;
line-height: 1;
min-height: 48px;
padding: 16px;
color: rgba(0, 0, 0, .87);
overflow: hidden;
}
を？