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

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 >
  <div >
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div >
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div >
    <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 >header</div>
  <div ></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?

CodePudding user response：

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>

CodePudding user response：

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

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 >header</div>
  <div ></div>
</body>

CodePudding user response：

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