CSS adapt the size of a div between two fixed divs

Question

I have 3 divs:

<div>
  <div id="div1">Title</div>
  <div id="div2">Some text</div>
  <div id="div3">Footer</div>
</div>

Every div have a width: 100%.
The title div height depends on its content so it can evoluate a little bit, and it has a fixed position. The Footer div has a fixed size (its content cannot change) and a fixed position.

The goal is to have the text div between this two divs, having its size exactly matches the remaining places between title and text div so I can apply a scroll on it.

Can somebody explain to me how to do that ?

Thanks

Sorry, but your question isn't the clearest atm. What do you mean by "having its size exactly matches the remaining places between title and text div"? If you can provide a diagram / drawing, that may help too. — RaaaCode, Aug 03 '22 at 13:09
It means that the title can either take 1 or 2 lines, and the footer height is always 10%. I need the text div to be between the to divs, and because footer and title are fixed positions I do not want my text div to be behing th footer one — Auloma, Aug 03 '22 at 13:12
I think you could use css `grid-auto-rows` property for that: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows — cs.matyi, Aug 03 '22 at 13:33

score 0 · Answer 1 · answered Aug 03 '22 at 13:35

Judging by the clarification in your comment what you're trying to achieve is a basic layout which should be done using the <header> and <footer> tags rather than reinventing the wheel with divs.

However if you're set on using divs you should use position: absolute; or position: fixed; on the #div1 and #div3 depending on what you need the to do. Using this method you should add apropriate margins to make sure div1 and 3 dont cover div2.

score 0 · Accepted Answer · answered Aug 03 '22 at 13:43

I assume you want something like this:

#div1 {
  background: rgba(0,0,250,0.2)
}

#div2 {
  flex-grow: 1;
  background: rgba(0,250,0,0.2);
  overflow: scroll;
}

#div3 {
  height: 10vh;
  background: rgba(250,0,0,0.2);
}

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

<div class="container">
  <div id="div1">Title</div>
  <div id="div2">Some text</div>
  <div id="div3">Footer</div>
</div>

CSS adapt the size of a div between two fixed divs

2 Answers2