使具有可变高度的周围元素的div的高度最大化 [英] Maximising the height of a div with surrounding elements of variable height
问题描述
我有一个div,我想在基于100vh的父级中最大化其大小。
问题是我有两个 p
div也可以根据窗口的宽度更改其高度,从而导致不同的大小。
现在快速和肮脏的解决方案可能只是运行一个jQuery片段来检测父 div 和 p
div并根据这些设置div的高度,在 doc.ready
和 window.onresize
上运行函数。 / p>
但是这种感觉是不必要的,我想知道是否有一个更简洁的解决方案使用我不知道的CSS。
我已经设置了一个简化的,但不工作的版本的问题,看看你是否可以得到一个比我所指的更清楚的想法。
* {margin:0 ; padding:0; font-family:Arial,san-serif;}#parent {height:100vh; background:lightblue;} p {font-size:40px;背景:黄色; }#p1 {top:0;}#p2 {bottom:0; position:absolute;} div {background-color:red; height:100%;}
< div id = parent> < p id =p1>只显示在顶部的长块< / p> < div>最大化Div< / div> < p id =p2>< / p>< / div> / p>
,这使它成为一个flex-容器。 >
解决方案您可以使用
flexbox
来实现您想要的。
由于有很多关于如何使用
flexbox
的资源,它不会被包含在这个答案。
- 您定义一个容器,在这种情况下<使用属性
display:flex;
的code> #parent
< p>
元素和<$ c $ c> 使用缩写属性 flex:1;
来填充的可用空间。
代码段:
* {margin:0; padding:0; font-family:Arial,san-serif;}#parent {height:100vh;背景:lightblue;显示:flex; flex-direction:column;} p {font-size:40px; background:yellow;} div> div {background-color:red; flex:1;}
< div id =parent > < p id =p1>只显示在顶部的长块< / p> < div>最大化Div< / div> < p id =p2>< / p>< / div> / p>
注意:
- 迈克尔 回答 以获取当前的浏览器支持。
I've a div that I'd like to maximise the size of, within a parent that's based on a 100vh.
The problem being that I have two p
divs that can also change their height based on the width of the window, leading to a varying size.
Now the quick and dirty solution might simply be to run a jQuery snippet to detect the sizes of the parent div
and p
divs and set the div's height based on these, running the function on doc.ready
and on window.onresize
.
But that feels unnecessary, and I'm wondering if there's a neater solution using only CSS that I'm unaware of?
I've set a simplified, but non-working version of the problem below to see if you can get a clearer idea than what I'm referring to.
Any tips would be great, thanks!
*{
margin: 0;
padding: 0;
font-family: Arial, san-serif;
}
#parent{
height: 100vh;
background: lightblue;
}
p{
font-size: 40px;
background: yellow;
}
#p1{
top: 0;
}
#p2{
bottom: 0;
position: absolute;
}
div{
background-color: red;
height: 100%;
}
<div id="parent">
<p id="p1">Long block that only appears on the top</p>
<div>Maximising Div</div>
<p id="p2">Long block that only appears on the bottom</p>
</div>
解决方案 You can achieve what you want with flexbox
.
Since there are a lot of resources about how to use flexbox
, it will not be included in the scope of this answer. However, I'll explain the basics so that you can understand what is going on here.
- You define a container, in this case
#parent
with the property
display: flex;
, this makes it a flex-container.
- This container's child elements are now flex-items, in your case the
<p>
elements and the <div>
in the middle.
- We then let the middle
<div>
grow to fill the available space of
the container with the shorthand property flex: 1;
.
Code Snippet:
* {
margin: 0;
padding: 0;
font-family: Arial, san-serif;
}
#parent {
height: 100vh;
background: lightblue;
display: flex;
flex-direction: column;
}
p {
font-size: 40px;
background: yellow;
}
div > div {
background-color: red;
flex: 1;
}
<div id="parent">
<p id="p1">Long block that only appears on the top</p>
<div>Maximising Div</div>
<p id="p2">Long block that only appears on the bottom</p>
</div>
Notes:
- Check Michael's answer for current browser support.
这篇关于使具有可变高度的周围元素的div的高度最大化的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!