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

Question

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>

have you checked out flexbox? I'm not sure if I understand what you are asking well enough to propose that as an answer, but I think that's what you are looking for. — kgiff, Oct 13 '16 at 21:25
Flex box gives you this functionality - depends on what kind of browser support you need. Have a look at http://www.w3schools.com/css/css3_flexbox.asp. I can do an example if you need. — Craig, Oct 13 '16 at 21:28

score 3 · Accepted Answer · edited May 23 '17 at 12:16

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.

This'll do nicely, thanks to all the responses with the same! — Finnb, Oct 13 '16 at 21:43
You're welcome! Make sure to look for Michael's posts about `flexbox` here in SO. He's a great contributor in this subject, as in many others. — Ricky Ruiz, Oct 13 '16 at 21:45

score 2 · Answer 2 · edited May 23 '17 at 12:33

*{
  margin: 0;
  padding: 0;
  font-family: Arial, san-serif;
}

#parent{
  height: 100vh;
  display: flex;              /* establish flex container */
  flex-direction: column;     /* stack child elements ("flex items") vertically */
  background: lightblue;
}

p{
  font-size: 40px; 
  background: yellow;
 }

#p1 { /* can be variable height */}

#p2 { /* can be variable height */ }

div {
  background-color: red;
  flex: 1;                    /* consume free space in container;
                                 will force p elements to top and bottom */
}

<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>

Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.

score 0 · Answer 3 · answered Oct 13 '16 at 21:43

Adding width: 100% to the <p> elements and setting body { overflow: hidden } to your current code provides the functionality you want if you can't use flexbox.

body{
  overflow: hidden;
}
*{
  margin: 0;
  padding: 0;
  font-family: Arial, san-serif;
}
#parent{
  height: 100vh;
  background: lightblue;
}
p{
  font-size: 40px; 
  background: yellow;
  width: 100%;
}
#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 class="maximising">Maximising Div</div>
  <p id="p2">Long block that only appears on the bottom</p>
</div>

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

3 Answers3

Linked