CSS发出页眉和页脚不保持其高度。
CSS发出页眉和页脚不保持其高度。
提问于 2018-06-07 11:07:53
在下面的代码中，我需要创建一个具有特定高度的页眉和页脚的框，中心div应该在高度100%。目前，如果我在#card上使用flex，页眉和页脚的高度会更短。
如果我将flex css从#card中删除，它就会像预期的那样工作。
我知道删除flex将解决我的问题，但我感兴趣的是，它是为什么会发生，我如何可以修复它使用静止flex。感谢您的反馈。
#card {
width: 300px;
height: 400px;
background-color: grey;
display:flex;
flex-direction: column;
}
#header {
width: 100%;
height: 50px;
background-color: red;
}
#content {
width: 100%;
height: 100%;
background-color: yellow;
overflow:auto;
}
#footer {
width: 100%;
height: 100px;
background-color: blue;
}<div id="card">
<div id="header">
</div>
<div id="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="footer">
</div>
</div>
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-06-07 11:13:38
删除height:100%并使用flex grow:1，然后将高度更改为最小高度(有时我喜欢同时使用min和max来确保高度固定)
#card {
width: 300px;
height: 400px;
background-color: grey;
display: flex;
flex-direction: column;
}
#header {
width: 100%;
min-height: 50px;
background-color: red;
}
#content {
width: 100%;
flex-grow:1
background-color: yellow;
overflow: auto;
}
#footer {
width: 100%;
min-height: 100px;
background-color: blue;
}<div id="card">
<div id="header">
</div>
<div id="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="footer">
</div>
</div>
更新-根据@Michael_B注释删除flex收缩
#card {
width: 300px;
height: 400px;
background-color: grey;
display: flex;
flex-direction: column;
}
#header {
width: 100%;
height: 50px;
flex-shrink: 0;
background-color: red;
}
#content {
width: 100%;
flex-grow:1
background-color: yellow;
overflow: auto;
}
#footer {
width: 100%;
height: 100px;
flex-shrink: 0;
background-color: blue;
}<div id="card">
<div id="header">
</div>
<div id="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="footer">
</div>
</div>
Stack Overflow用户
发布于 2018-06-07 11:17:03
这是因为您的height元素在header和footer标记上。
这个CSS允许您在不改变header和footer height的情况下使用display: flex;。当父级具有定义良好的高度时，100%的高度可以工作。
#card {
width: 300px;
height: 400px;
background-color: grey;
display: flex;
flex-direction: column;
}
#header {
width: 100%;
max-height: 50px;
height: 100%;
background-color: red;
}
#content {
width: 100%;
height: 100%;
background-color: yellow;
overflow: auto;
}
#footer {
width: 100%;
max-height: 100px;
height: 100%;
background-color: blue;
}<div id="card">
<div id="header">
</div>
<div id="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="footer">
</div>
</div>
Stack Overflow用户
发布于 2018-06-07 11:21:55
它运行正常；您将其设置为height: 400px，其高度为400 is (检查它)。我认为您要寻找的是用height: 100vh代替height: 100vh，使#card覆盖任何屏幕的整个高度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50739691
复制相关文章
相似问题
腾讯云开发者
