create a div with height equal to remaining available space

Question

I know this is an already asked question, but no solution found work on my pages.

I have a page:

header with fixed height: 60px
sub-header div: height dinamic based on content
search div: height dinamic based on content

fullcalendar div: this div need to be equal to remaining space available to fit screen

  <header style="height:60px">LOGO + HORIZONTAL MENU</header>
  <div id="sub-header">SOME CONTENT HERE...</div>
  <div id="search-div">SOME CONTENT HERE FOR SEARCH...</div>
  <div id="fc-div"><div id="calendar"></div></div>

I want to set fc-div to get height of remaining space to prevent scroll-y

score 0 · Answer 1 · edited Dec 18 '19 at 12:08

0

If you set the body (or any parent div) to have a height of 100vh, then make it a flex component with direction: column, and give the fc-div a flex-grow of 1, I think it should work. So:

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#fc-div {
  flex-grow: 1;
}


/* for demo */
body {
  margin:0;
}

#fc-div {
  background:gray;/* see me */
}

<header style="height:60px">LOGO + HORIZONTAL MENU</header>
<div id="sub-header">SOME CONTENT HERE...</div>
<div id="search-div">SOME CONTENT HERE FOR SEARCH...</div>
<div id="fc-div">
  <div id="calendar"></div>
</div>

EDIT: Was missing the '#' before fc-div

edited Dec 18 '19 at 12:08

G-Cyrillus

101,410
14
105
129

answered Dec 18 '19 at 11:16

Jenaro Calviño

195
13

it doesn't work – Giuseppe Lodi Rizzini Dec 18 '19 at 11:20
https://codepen.io/jenaro94/pen/jOEywjy I made this codepen where it works – Jenaro Calviño Dec 18 '19 at 11:26
thank you. tried in my scenario where is present bootstrap (class=row, class=col-lg-12) still doesn't work – Giuseppe Lodi Rizzini Dec 18 '19 at 11:31
@GiuseppeLodiRizzini Dear, please provide a jsfidddel or codepen url – Ankit Pandey Dec 18 '19 at 11:52

create a div with height equal to remaining available space

1 Answers1