Flexbox 100% 高度问题
Posted
技术标签:
【中文标题】Flexbox 100% 高度问题【英文标题】：Flexbox 100% height Issue 【发布时间】：2017-10-19 22:13:12 【问题描述】：我找到了以下链接...但它仍然没有帮助我...
how to make nested flexboxes workHeight 100% on flexbox column childHow to make flexbox children 100% height of their parent?
我需要一个响应式的完整页面，如下图所示： 页眉和页脚以及中间 5 列在剩余空间中平均填充高度，然后当我进行媒体查询时，像这样填充移动设备的屏幕：
这是我到目前为止的代码......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,
body
height: 100%;
margin: 0
.box
display: flex;
flex-flow: column;
height: 100%;
.box .row
border: 1px dotted grey;
.box .row.header
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
.box .row.content
flex: 1 1 auto;
.box .row.footer
flex: 0 1 40px;
.yellow-back
background: #ffe001;
.red-back
background: #e31e25;
.green-back
background: #66af45;
.purple-back
background: #954294;
.containerFull position: relative; width: 100%; margin: 0 auto; padding: 0;
.containerFull .column,
.containerFull .columns float: left; display: inline; margin-left: 0px; margin-right: 0px;
.containerFull .one-fifth.column width: 20%;
</style>
</head>
<body>
<div class="box">
<div class="row header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<div class="containerFull">
<div class="one-fifth column green-back">Here</div>
<div class="one-fifth column red-back">Here</div>
<div class="one-fifth column">Here</div>
<div class="one-fifth column yellow-back">Here</div>
<div class="one-fifth column purple-back">Here</div>
</div><!-- ContainerFull -->
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>
</body>
</html>
html,
body
height: 100%;
margin: 0
.box
display: flex;
flex-flow: column;
height: 100%;
.box .row
border: 1px dotted grey;
.box .row.header
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
.box .row.content
flex: 1 1 auto;
.box .row.footer
flex: 0 1 40px;
.yellow-back
background: #ffe001;
.red-back
background: #e31e25;
.green-back
background: #66af45;
.purple-back
background: #954294;
.containerFull
position: relative;
width: 100%;
margin: 0 auto;
padding: 0;
.containerFull .column,
.containerFull .columns
float: left;
display: inline;
margin-left: 0px;
margin-right: 0px;
.containerFull .one-fifth.column
width: 20%;
<div class="box">
<div class="row header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<div class="containerFull">
<div class="one-fifth column green-back">Here</div>
<div class="one-fifth column red-back">Here</div>
<div class="one-fifth column">Here</div>
<div class="one-fifth column yellow-back">Here</div>
<div class="one-fifth column purple-back">Here</div>
</div>
<!-- ContainerFull -->
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>【问题讨论】：
我忘了补充我想要背景图片或颜色来填充空间...谢谢！ 也许这篇文章可以帮助你。 Content within div won't fill available space without specifying height，检查您是否将身体高度设置为 100vh，然后设置其余内容高度会更容易。还要使用 CSS 重置文件，以避免出现奇怪的行为。 【参考方案1】：除了 Michael Coker 的回答，如果你一直使用 Flexbox，你可以大大减少你的标记和 CSS，并得到这个惊人的结果。
我还包含了您评论/询问的背景图片和媒体查询，只是为了展示这可以做到多么简单。
在 CSS 中做了一些注释。当涉及到页眉和页脚时，您可以根据需要给它们一个高度，但这并不需要这样做，所以我把它们省略了，这样人们就可以看到 Flexbox 在分发内容方面的表现如何......希望我有这种技术 20 年前 :)
html, body
margin: 0;
.box
display: flex;
flex-direction: column;
height: 100vh; /* instead of using 100% all over, use viewport units once */
background-size: cover;
background: black url(http://lorempixel.com/500/500/nature/4/) no-repeat center;
.box .row.content,
.content .one-fifth.column
flex: 1; /* fill the space equal, no matter row or column direction */
display: flex;
.box .row.header,
.box .row.footer color: white;
.box .row.content background: #fff;
.yellow-back background: #ffe001;
.red-back background: #e31e25;
.green-back background: #66af45;
.purple-back background: #954294;
@media screen and (max-width: 600px)
/* smaller screens */
.box .row.content
flex-direction: column; /* by simply swap direction it work on smaller screen */
<div class="box">
<div class="row header">
<p><b>header</b><br /><br />(sized to content)</p>
</div>
<div class="row content">
<div class="one-fifth column green-back">Here</div>
<div class="one-fifth column red-back">Here</div>
<div class="one-fifth column">Here</div>
<div class="one-fifth column yellow-back">Here</div>
<div class="one-fifth column purple-back">Here</div>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>【讨论】：
@lgson 这太棒了，就像一个魅力！现在......我只需要图标（PNG）和下面的标题，保持在弹性高度框的中间，然后在移动设备上时，图标必须向左移动，标题向右移动的图标。可以吗？ @LGSon 完美！我不是同性恋，但我想我可能不得不嫁给你！谢谢！【参考方案2】：我也会将列部分设为弹性布局。你可以将.content和.containerFull设置为display: flex，然后.containerFull会“拉伸”来填充.content的高度，然后你可以在列上使用flex-basis来控制宽度。
html,
body
height: 100%;
margin: 0
.box
display: flex;
flex-flow: column;
height: 100%;
.box .row
border: 1px dotted grey;
.box .row.header
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
.box .row.content
display: flex;
.box .row.content
flex: 1 1 auto;
.containerFull
display: flex;
.box .row.footer
flex: 0 1 40px;
.yellow-back
background: #ffe001;
.red-back
background: #e31e25;
.green-back
background: #66af45;
.purple-back
background: #954294;
.containerFull
position: relative;
width: 100%;
margin: 0 auto;
padding: 0;
.containerFull .column,
.containerFull .columns
margin-left: 0px;
margin-right: 0px;
.containerFull .one-fifth.column
flex-basis: 20%;
<div class="box">
<div class="row header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<div class="containerFull">
<div class="one-fifth column green-back">Here</div>
<div class="one-fifth column red-back">Here</div>
<div class="one-fifth column">Here</div>
<div class="one-fifth column yellow-back">Here</div>
<div class="one-fifth column purple-back">Here</div>
</div><!-- ContainerFull -->
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>【讨论】：
赞成你的，我只需要发布我自己的答案，因为这是一个经典问题，flexbox 用极少的代码和标记就可以做得很好:)以上是关于Flexbox 100% 高度问题的主要内容，如果未能解决你的问题，请参考以下文章
Chrome 中的 Flexbox 容器没有达到 100% 的高度 [重复]
高度为 100% 的 Div 溢出到其父级下方的 flexbox 行 [重复]
在 flexbox 中使用“高度：100%”和“对齐项目：拉伸”[重复]