为什么“高度: 1%”在我的弹性框布局中解决了这个问题？
为什么“高度: 1%”在我的弹性框布局中解决了这个问题？
提问于 2017-09-06 10:33:43
在这支笔/小提琴中，我为演示目的创建了一个非常非常简单的页面布局：在这儿见潘/费德尔！
在浅蓝色的"content"-area中，我有一个带有类flex-container的div，它包含一个标题和一个div嵌套的图像。
<div class="content">
<div class="flex-container">
<h1>Nice Image</h1>
<div>
<img src="http://loremflickr.com/800/800" />
</div>
</div>
</div>我遇到的问题是，每当我在53至100%行中设置图像父-div高度时，图像就会流过来。我开始玩它，当我将高度设置为小于100%时，图像很好地缩放以适应div的剩余高度，也就是由生长弯曲的父母div占据的区域。
.content {
background-color: rgba(0, 0, 255, 0.3);
overflow: hidden;
position: relative;
height: 100%;
box-sizing: border-box;
.flex-container {
height: 100%;
display: flex;
flex-direction: column;
background-color: rgba(255, 255, 255, 0.5);
>div {
flex-grow: 1;
height: 1%;
}
img {
height: 100%;
}
}
}我想知道这是为什么？这种方法感觉不太干净，我想知道如何才能改进这个布局，使其感觉不那么“烦琐”。
全文HTML:
<div class="container">
<div class="header">Nav</div>
<div class="nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="content">
<div class="flex-container">
<h1>Nice Image</h1>
<div>
<img src="http://loremflickr.com/800/800" />
</div>
</div>
</div>
<div class="status">
<p>Status: Lorem ipsum dolor sit amet</p>
</div>
</div>全SCSS:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
ul, h1, p, img {
margin: 0;
padding: 0;
}
.container {
background-color: rgba(0, 0, 0, 0.2);
height: 100%;
width: 100%;
overflow: hidden;
padding: 38px 0px 30px 161px;
box-sizing: border-box;
.header {
background-color: rgba(255, 0, 0, 0.3);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 38px;
}
.nav {
background-color: rgba(0, 255, 0, 0.3);
position: fixed;
left: 0;
width: 161px;
height: 100%;
}
.content {
background-color: rgba(0, 0, 255, 0.3);
overflow: hidden;
position: relative;
height: 100%;
box-sizing: border-box;
.flex-container {
height: 100%;
display: flex;
flex-direction: column;
background-color: rgba(255, 255, 255, 0.5);
>div {
flex-grow: 1;
height: 1%;
}
img {
height: 100%;
}
}
}
.status {
background-color: rgba(255, 255, 0, 0.3);
position: fixed;
left: 161px;
bottom: 0;
width: 100%;
height: 30px;
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2017-09-06 13:43:29
我开始玩它，一旦我设置高度低于100%，图像很好地缩放，以适应其余的高度的div.
实际上，这并不完全正确。
当高度设置为小于96%时，图像非常适合。
这是因为容器中有两个占据空间的项:标题和图像。
这个头衔占了身高的5%。这留下了95%的图像。
任何超过95%的东西都会溢出。
任何低于95%的内容都非常适合，因为flex-grow: 1被设置为占用空闲空间。没有flex-grow，图像容器就会相应地缩小。
在图像周围添加一个边框，以清楚地说明此行为(订正码)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46073013
复制相关文章
相似问题
腾讯云开发者
