Finnb Finnb - 1 month ago 9
jQuery Question

Maximising the height of a div with surrounding elements of variable height

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>




Answer

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.

  1. You define a container, in this case #parent with the property display: flex;, this makes it a flex-container.
  2. This container's child elements are now flex-items, in your case the <p> elements and the <div> in the middle.
  3. 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.
Comments