Make a div fill the height of the remaining screen space when header is fixed

Question

In my site I have the following structure:

Header
Content
Footer

And I want to make the Header and the Footer size based on their content (not a fixed size). And the Content to fill the remaining space.

I saw many questions and answers like: Make a div fill the height of the remaining screen space that solves similar cases but in my case, the Header and Footer sizes are unknown so I can't use the calc() function, and the Header Has position:fixed which removes it from the layout calculations and makes the flex solutions of various kinds wrong:

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  position: fixed;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

<!-- Source - https://stackoverflow.com/a/24979148-->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

Or using this solution:

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  
}
.header{
   position:fixed;
}
.content {
  flex-grow: 1;
  border: 1px dotted red;
}

<!-- Source - https://stackoverflow.com/a/28771764-->

<body>
  <div class="header">header</div>
  <div class="content"></div>
</body>

Is there any way to do make the Content height = 100% - FooterHeight - HeaderHeight When the Footer and Header dimensions are unknown, and the Header has fixed position?

score 1 · Answer 1 · answered Jul 24 '22 at 16:05

Since the header is fixed, I think you would need to know its height through JavaScript, and set the body's min-height as 100% of the viewport's height minus the header's height. After, you could simply use CSS Grid on body, to have the content take all the avaiblable height. Like so:

document.body.style.minHeight=`calc(100vh - ${document.querySelector("header").clientHeight}px)`; 
document.body.style.paddingTop= document.querySelector("header").clientHeight + "px";

body{
  margin:0;
  display:grid;
  grid-template-rows:1fr auto;
}
header{
  background:lightblue;
  position:fixed;
  top:0;
  left:0;
  width:100%;
}
div{
  background:lightgreen;
}

footer{
  background:lightyellow;
}

<header>I'm the header</header>
<div>I'm the content</div>
<footer>I'm the footer</footer>

Thanks but I was looking for pure css solution, I found that using `position: sticky` solved the problem! — ATP, Jul 24 '22 at 16:09
Yeah `sticky` would work, thought that `fixed` was a must here. Anyway glad you have what you are looking for :) — Youssouf Oumar, Jul 24 '22 at 16:12

ATP · Accepted Answer · 2022-07-25T09:01:37.783

Finally I found a pure css solution. since the Header is in the top , using position: sticky instead of fixed will have the same result but the layout will take it into account when calculating:

html,
body {
  height: 100%;
  margin:0;
}

body {
  display: flex;
  flex-direction: column;
  
}
.header{
   position:sticky;
}
.content {
  flex-grow: 1;
  border: 1px dotted red;
}

<!-- Source - https://stackoverflow.com/a/28771764-->

<body>
  <div class="header">header</div>
  <div class="content"></div>
</body>

score 0 · Answer 3 · answered Jul 24 '22 at 16:13

I can think of two solutions based on the rather general description of your problem:

A) Use JavaScript to do the calculations for you and apply the values to margins or positions, whichever works better in your case;

B) You could repeat the contents of the header (and footer, id that's out of the document flow also) in element(s) atop the content and make it transparent and non-inter-active (pointer-events: none) - dirty, but if JS is not an option and your header does not offer some other way to determine it's height through some 'css-magic' it might be the only solution.

Quite often I find, that there are better solutions when the problem is more specifically described, so if you can tell us what elements make it impossible to know the height of the header, there might be better solutions. Often when ratios as with images are in play, vh can come to the rescue - even though tha can be tricky too...

Make a div fill the height of the remaining screen space when header is fixed

3 Answers3