引用this Fiddle .
我有一个顶级 div，其高度配置为一个屏幕高度 (height:100vh)。在这个 div 中，有一个固定高度 (60px) 的子 div 和另一个我想要增长以填充剩余高度的子 div(以便响应不同的屏幕尺寸)。
这个子 div 有一个图像和一些文本。目前，它的宽度是硬编码的，否则图像会填满整个屏幕(并超过其父级的长度)。设置 height:100%(甚至 calc(100% - 60px))不会像我希望的那样缩放 div。
.one-page {
min-height: 100vh;
max-height: 100vh;
background-color: #FF5555;
}
.fixed-size {
height: 60px;
border-style: solid;
}
.main-container {
background-color: #55FF55;
width: 300px;
margin: auto;
}
.subtitle {
text-align: center
}
.other {
background-color: blue;
}
img {
vertical-align: middle;
width: 100%;
height: auto;
}<body>
<div class="one-page">
<div class="fixed-size">
this div is a fixed size
</div>
<div class="main-container">
<p>
<img src="http://images.clipartpanda.com/square-clip-art-clipart-square-shield-256x256-e296.png">
</p>
<div class="subtitle">
subtitle text
</div>
</div>
</div>
<div class="other">
something else
</div>
</body>最佳答案
尝试使用height:calc(100vh - 60px)。
.main-container {
background-color: #ff00ff;
width: 300px;
margin: auto;
padding:0;
height:calc(100vh - 60px);
}
关于html - 用图像填充父级高度的 div 样式高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46679578/