将flexbox的高度限制为浏览器窗口的大小(当前溢出导致垂直滚动) [英] Limit flexbox height to browser window (currently it's overflowing causing vertical scroll)
问题描述
我正在尝试开发一个适合浏览器窗口大小的应用程序.
I'm trying to have an app that fit the window size of the browser.
菜单的高度应适合父项的100%,而不应适合屏幕的高度100%.我有这个:
The menu should have a height that fit 100% of the parent and not have a height of 100% of the screen. I have this:
|---------------------------------|
| 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
高度结合在一起,这会导致浏览器窗口溢出.
You need to adjust your height: 100%
in two places. Currently, it's combining with additional px
heights defined in your code, which is causing the overflow in the browser window.
代替此:
.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 */
}
了解有关W3C的CSS calc
功能的更多信息:
Learn more about the CSS calc
function at W3C:
calc()
函数允许添加数学表达式
(+),减法(-),乘法(*)和除法(/)
作为组件值. calc()
表达式表示的结果
使用标准运算符包含的数学计算
优先规则.可以在<length>
,<frequency>
,
允许<angle>
,<time>
,<number>
或<integer>
值. (了解详情.)
The calc()
function allows mathematical expressions with addition
(+), subtraction (-), multiplication (*), and division (/) to be used
as component values. The calc()
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.)
这篇关于将flexbox的高度限制为浏览器窗口的大小(当前溢出导致垂直滚动)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!