如何让图像填充div中的剩余空间？[副本]
我有一个<代码>
- 窄的标题行
- 我想占用div剩余部分的图像。
如何使用纯CSS（无Javascript）实现这一点？我一直在尝试很多事情，运气不好。
这是我能得到的最接近的；图像偷偷溜出了div.container的绿色边框
html, body {
height: 100%;
overflow: hidden;
margin: 0px;
}
div.container {
height: 60%;
border: 2px solid green;
box-sizing: border-box;
}
div.rest {
height: 40%;
border: 2px solid red;
box-sizing: border-box;
}
div.img-container {
height: 100%; /* this is wrong, but what do I do? */
}
div.img-container img {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
opacity: 0.5;
}<html>
<body>
<div class="container">
<div class="header">hieronymus bosch last judgement</div>
<div class="img-container"><img src="https://i.imgur.com/TT6drhn.jpg"></div>
</div>
<div class="rest">
<h1>blah blah blah</h1>
</div>
</body>
</html>下面是我尝试使用flex，但失败了。
html, body {
height: 100%;
overflow: hidden;
margin: 0px;
}
div.container {
height: 60%;
border: 2px solid green;
box-sizing: border-box;
display: flex;
flex-direction: column
}
div.rest {
height: 40%;
border: 2px solid red;
box-sizing: border-box;
}
div.img-container {
flex: 1;
}
div.header {
flex: 0;
}
div.img-container img {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
opacity: 0.5;
}<html>
<body>
<div class="container">
<div class="header">hieronymus bosch last judgement</div>
<div class="img-container"><img src="https://i.imgur.com/TT6drhn.jpg"></div>
</div>
<div class="rest">
<h1>blah blah blah</h1>
</div>
</body>
</html>共有3个答案
对于Flex，您可以使用Flex属性和溢出（或最小高度）。例子：
html, body {
height: 100vh;
margin: 0px;
display:flex;
flex-direction:column;
}
div.container {
flex:6;/* instead height:xx% */
border: 2px solid green;
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow:hidden; /* or min-height:0 if scroll is needed */
}
div.rest {
flex:4;/* instead height:xx% */
border: 2px solid red;
box-sizing: border-box;
}
div.img-container {
flex: 1;
min-height:0; /* or overflow:hidden; */
}
div.header {
min-height:1.6em; /* if you need something alike ?? */
}
div.img-container img {
max-height: 100%;
opacity:0.5;
}<html>
<body>
<div class="container">
<div class="header">hieronymus bosch last judgement</div>
<div class="img-container"><img src="https://i.imgur.com/TT6drhn.jpg"></div>
</div>
<div class="rest">
<h1>blah blah blah</h1>
</div>
</body>
</html>
如果您查看Chrome检视器中的div.img-容器，您可以看到问题所在-img元素正在执行其工作并填充其容器，但是容器本身正在溢出。
之所以会发生这种情况，是因为它被设置为高度：100%——上面说的是“让我的身高达到父母身高的100%”，但这并不意味着“填满剩余的空间”浏览器只读取元素父元素的计算高度，然后将其乘以%值-基本上，都是绝对值。您可以看到，蓝色框的高度与绿色框的高度完全相同，但由于它位于文本行下方，因此会溢出该文本的高度。
flex可以用来解决这个问题，但是通过使用calc减去文本的高度，您可以很快地解决这个问题。在您的示例中，它是19px，我建议手动设置该文本元素容器的高度，以确保在边缘情况下不会有任何损坏。然后，。img容器获取高度：计算（100%-19px）并按预期工作。
html, body {
height: 100%;
overflow: hidden;
margin: 0px;
}
div.container {
height: 60%;
border: 2px solid green;
box-sizing: border-box;
}
div.rest {
height: 40%;
border: 2px solid red;
box-sizing: border-box;
}
div.img-container {
height: 100%; /* this is wrong, but what do I do? */
}
div.img-container img {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
opacity: 0.5;
}
/*
ADDED CODE BELOW
*/
/* optional, just to be safe */
.header {
height: 19px;
}
/* overrides .img-container from above */
.img-container {
height: calc(100% - 19px) !important;
}<html>
<body>
<div class="container">
<div class="header">hieronymus bosch last judgement</div>
<div class="img-container"><img src="https://i.imgur.com/TT6drhn.jpg"></div>
</div>
<div class="rest">
<h1>blah blah blah</h1>
</div>
</body>
</html>
@如果您知道标题元素的高度，Christian的方法是有效的，但是您也可以使用flex。
这允许元素增长以动态填充剩余空间，因此标题可以是任意高度。
html,
body {
height: 100%;
overflow: hidden;
margin: 0px;
}
div.container {
height: 60%;
border: 2px solid green;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
div.rest {
height: 40%;
border: 2px solid red;
box-sizing: border-box;
}
div.img-container {
flex: 1;
position: relative;
}
div.img-container img {
opacity: 0.5;
height: 100%;
position: absolute;
}<html>
<body>
<div class="container">
<div class="header">hieronymus bosch last judgement</div>
<div class="img-container"><img src="https://i.imgur.com/TT6drhn.jpg"></div>
</div>
<div class="rest">
<h1>blah blah blah</h1>
</div>
</body>
</html>-
问题内容： 我有2个div： 页面左侧有一个，右侧是一个。左侧的一个宽度固定，我希望右侧的一个填充剩余空间。 问题答案： 这似乎可以完成您想要的。
-
问题内容： 我在flexbox中并排有2个div。右手应始终具有相同的宽度，我希望左手仅抓住剩余空间。除非我专门设置宽度，否则它不会。 因此，现在将其设置为96％，直到您真正按下屏幕为止，它看起来还可以-右div有点饿了它所需的空间。 我想我可以保留原样，但感觉不对，就像必须要说的那样： 正确的人永远是相同的； 你在左边-你得到剩下的一切 问题答案： 使用该属性可以使弹性项目消耗 主轴上的 可用空
-
我对荡秋千很陌生。我有一个基于外部输入动态生成UI的应用程序。在面板的顶部，有一个带有一些标题文本的JLabel，然后是一个按钮（告诉应用程序重新加载动态生成的内容），然后在下面是一个JScrollPane，其中包含所有动态生成的内容。我希望标签和按钮只占用所需的垂直空间，然后滚动窗格来填充所有剩余的可用空间。 我正在使用GridBagLayout，并在添加滚动窗格之前设置gbc.fill=BOT
-
问题内容： 我正在一个Web应用程序上工作，我希望其中的内容能填满整个屏幕的高度。 该页面具有标题，其中包含徽标和帐户信息。这可以是任意高度。我希望内容div将页面的其余部分填充到底部。 我有一个标题和一个内容。目前，我正在使用表格进行布局，如下所示： CSS和HTML 页面的整个高度已填满，不需要滚动。 对于content div中的任何内容，设置将其放在标题的正下方。有时，内容将是一个实际表，
-
我有一个基本的flexbox布局，如下所示。。 我试图使顶部的div填充剩余的空间，底部的div是动态的，因此高度根据文本的不同而变化。我的结果是这样的。。 在这种情况下，flexbox是最好的选择吗？
-
问题内容： 如何使div填充剩余宽度？ 我如何才能填满其余部分？ 问题答案： 试试这样的事情： div自然会占用其容器的100％宽度，因此无需显式设置此宽度。通过添加与两侧div相同的左/右页边距，它自己的内容被强制置于它们之间。 请注意，“中间格”云 后 的HTML“正确的div”