使具有可变高度的周围元素的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> 
 
解决方案
您可以使用 flexbox 来实现您想要的。 
 
 
 
由于有很多关于如何使用 flexbox 的资源，它不会被包含在这个答案。 
 
 
您定义一个容器，在这种情况下<使用属性
  display：flex; 的code> #parent ，这使它成为一个flex-容器。 > 
 
此容器的子元素现在是flex-items，在您的情况下是
 < 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屋！