我正在尝试制作适合浏览器窗口大小的应用。
菜单的高度应适合父级的 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;
}
我怎样才能做到这一点?
最佳答案
您需要调整您的 height: 100%
在两个地方。目前,它与其他 px
相结合代码中定义的高度,这会导致浏览器窗口溢出。
取而代之的是:
.layout-flex-container {
height: 100%;
}
aside > nav {
height: 100%;
}
试试这个:
.layout-flex-container {
height: calc(100% - 128px); /* subtract the defined height of the header element */
}
aside > nav {
height: calc(100% - 64px); /* subtract the defined line-height of the h2 element */
}
了解有关 CSS 的更多信息 calc
W3C 的功能:
8.1. Mathematical Expressions:
calc()
The
calc()
function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values. Thecalc()
expression represents the result of the mathematical calculation it contains, using standard operator precedence rules. It can be used wherever<length>
,<frequency>
,<angle>
,<time>
,<number>
, or<integer>
values are allowed. (Read more.)
关于html - 将 flexbox 高度限制为浏览器窗口(目前它溢出导致垂直滚动),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36332944/