Html - Full height div with scrollable and fixed children

FatihBulut
January 2, 2024
104 views
0 votes
2 Answers

I need to show a div element in some cases full height, not a scrollable page, but inside div, there must be some scrollable children. I drew the scenario and created a jsfiddle. I would be so happy if someone can help me here.

Requirement for the scenario are like this:

.main should be full height/screen.
.main should have position:fixed; top:0; bottom:0; left: 0, right: 0; styles.
There are some scrollable areas,
and others should stay the same.
.main__inner__content__description_1
should be scrollable.
.main__inner__content__description_2 should be
scrollable. .main__inner__content__second or
.main__inner__content__description-2 will be a fixed height.
.main__inner__content__first or .main__inner__content__description-1
should take the rest of the height automatically, so if I change the
height of the .main__inner__content__second, then .main__inner__content__first should update its height accordingly.
.main__footer may not exist in some cases, so the rest should expand.

https://jsfiddle.net/yqdz9uw3/

    <div class="main">
      <div class="main__header"></div>
      <div class="main__inner">
        <div class="main__inner__header">HEADER</div>
        <div class="main__inner__content">
          <div class="main__inner__content__first">
            <div class="main__inner__content__title-1">Area 1</div>
            <div class="main__inner__content__description-1">
              Reprehenderit voluptate proident incididunt exercitation
              voluptate. Sint ad ad tempor consectetur proident exercitation
              esse consectetur in voluptate veniam dolor. Aute officia aliquip
              irure non quis culpa ut veniam ut. Anim pariatur aliqua cupidatat
              nulla aute pariatur. Dolore pariatur anim commodo aute do laboris
              aute nulla et irure sint duis. Magna exercitation ea mollit eu
              aliqua id in. Dolor ex in irure veniam. Fugiat reprehenderit
              excepteur ullamco dolore do labore labore sit. Ut nulla officia in
              reprehenderit irure elit sint ex eiusmod tempor eiusmod culpa
              laborum cillum et. Pariatur nostrud dolor tempor ad incididunt
              incididunt eiusmod officia mollit amet cillum aliqua. Irure ea
              quis ad. Sit cupidatat veniam aliqua non elit ipsum magna dolore.
              Esse ea fugiat ea elit nulla reprehenderit incididunt ullamco
              dolor mollit eiusmod laboris non. Dolor consequat Lorem eiusmod.
              Enim culpa reprehenderit veniam culpa eiusmod nostrud
              reprehenderit dolore tempor ipsum aliquip labore ut fugiat
              consequat. Nostrud excepteur adipisicing consequat. Quis voluptate
              labore dolore officia eiusmod est elit aliqua laborum. Incididunt
              officia qui consequat incididunt laborum proident nisi sunt sint
              aliqua irure aliqua amet. Exercitation incididunt nulla anim qui.
              Veniam occaecat qui tempor et quis culpa aliqua aliquip laboris
              voluptate tempor quis ipsum. Anim occaecat consectetur enim labore
              commodo minim do voluptate esse culpa ut officia consequat et
              exercitation. Pariatur in dolore labore non. Exercitation commodo
              dolor id culpa fugiat dolore labore. Ullamco exercitation esse et
              officia ullamco est deserunt sunt voluptate Lorem exercitation
              excepteur. Cupidatat ullamco exercitation aute commodo sunt anim
              laborum do consequat mollit dolor dolore. In eiusmod cillum enim
              do amet et laboris nulla mollit. Qui dolore veniam non excepteur
              reprehenderit minim incididunt amet tempor aute magna et occaecat.
              Nulla incididunt do duis. Pariatur dolore amet culpa cillum elit
              ea enim dolor velit. Officia quis commodo anim aliqua culpa.
              Adipisicing in eu ipsum ad culpa cupidatat anim eiusmod sint ad.
              Cillum labore voluptate sunt anim nulla eiusmod laboris aute
              tempor aute. Ipsum excepteur ex sunt cupidatat labore proident
              nostrud ex minim qui veniam non. Velit labore cillum cupidatat ea
              mollit culpa dolore ex sunt. Amet ullamco mollit deserunt. Dolor
              eu quis excepteur nostrud in esse. Pariatur in cupidatat
              exercitation veniam consectetur sint incididunt ut qui magna nisi
              occaecat. In cillum sunt mollit. Occaecat enim veniam duis enim
              nisi. Voluptate in culpa magna exercitation. Non sit magna
              voluptate incididunt consectetur ex amet consectetur excepteur
              aute consequat enim sunt amet fugiat. Laboris eu pariatur nulla ut
              aute aliquip laboris duis. Officia commodo Lorem commodo fugiat
              fugiat velit non ut consequat velit occaecat. Aute fugiat quis
              aute dolore pariatur mollit occaecat in do commodo fugiat.
              Consectetur non occaecat labore consequat commodo pariatur id
              ipsum cillum. Reprehenderit nulla eiusmod culpa dolore enim veniam
              tempor. Cupidatat nulla eiusmod laboris ullamco fugiat ea fugiat
              in mollit deserunt aliquip esse ullamco esse sint. Adipisicing
              pariatur adipisicing minim et reprehenderit labore amet. Culpa
              excepteur et esse elit qui aliquip enim eu voluptate ut. Laborum
              esse tempor consectetur mollit exercitation non ad adipisicing
              pariatur. Sit id ut eu dolore anim ullamco eu. Aliquip dolore
              Lorem sint velit voluptate. Anim excepteur consequat magna officia
              minim anim Lorem magna culpa tempor aliqua. Quis fugiat nulla
              ipsum. Sint pariatur aliquip proident labore est pariatur aliquip
              in. Veniam laborum do consectetur nostrud nostrud laborum. Quis
              reprehenderit esse et ex amet. Anim amet ex culpa ullamco sunt.
              Aliquip et consequat commodo officia consequat adipisicing eiusmod
              quis aliquip pariatur incididunt dolore. Amet dolore ipsum
              proident laborum id. Nisi sint aute voluptate do in et ut. Dolor
              laboris sunt incididunt et sint ullamco nostrud commodo est magna
              tempor et laborum consequat. Elit ex nostrud deserunt qui dolor
              commodo velit nisi sint incididunt amet. Reprehenderit voluptate
              proident incididunt exercitation voluptate. Sint ad ad tempor
              consectetur proident exercitation esse consectetur in voluptate
              veniam dolor. Aute officia aliquip irure non quis culpa ut veniam
              ut. Anim pariatur aliqua cupidatat nulla aute pariatur. Dolore
              pariatur anim commodo aute do laboris aute nulla et irure sint
              duis. Magna exercitation ea mollit eu aliqua id in. Dolor ex in
              irure veniam. Fugiat reprehenderit excepteur ullamco dolore do
              labore labore sit. Ut nulla officia in reprehenderit irure elit
              sint ex eiusmod tempor eiusmod culpa laborum cillum et. Pariatur
              nostrud dolor tempor ad incididunt incididunt eiusmod officia
              mollit amet cillum aliqua. Irure ea quis ad. Sit cupidatat veniam
              aliqua non elit ipsum magna dolore. Esse ea fugiat ea elit nulla
              reprehenderit incididunt ullamco dolor mollit eiusmod laboris non.
              Dolor consequat Lorem eiusmod. Enim culpa reprehenderit veniam
              culpa eiusmod nostrud reprehenderit dolore tempor ipsum aliquip
              labore ut fugiat consequat. Nostrud excepteur adipisicing
              consequat. Quis voluptate labore dolore officia eiusmod est elit
              aliqua laborum. Incididunt officia qui consequat incididunt
              laborum proident nisi sunt sint aliqua irure aliqua amet.
              Exercitation incididunt nulla anim qui. Veniam occaecat qui tempor
              et quis culpa aliqua aliquip laboris voluptate tempor quis ipsum.
              Cillum labore voluptate sunt anim nulla eiusmod laboris aute
              tempor aute. Ipsum excepteur ex sunt cupidatat labore proident
              nostrud ex minim qui veniam non. Velit labore cillum cupidatat ea
              mollit culpa dolore ex sunt. Amet ullamco mollit deserunt. Dolor
              eu quis excepteur nostrud in esse. Pariatur in cupidatat
              exercitation veniam consectetur sint incididunt ut qui magna nisi
              occaecat. In cillum sunt mollit. Occaecat enim veniam duis enim
              nisi. Voluptate in culpa magna exercitation. Non sit magna
              voluptate incididunt consectetur ex amet consectetur excepteur
              aute consequat enim sunt amet fugiat. Laboris eu pariatur nulla ut
              aute aliquip laboris duis. Officia commodo Lorem commodo fugiat
              fugiat velit non ut consequat velit occaecat. Aute fugiat quis
              aute dolore pariatur mollit occaecat in do commodo fugiat.
              Consectetur non occaecat labore consequat commodo pariatur id
              ipsum cillum. Reprehenderit nulla eiusmod culpa dolore enim veniam
              tempor. Cupidatat nulla eiusmod laboris ullamco fugiat ea fugiat
              in mollit deserunt aliquip esse ullamco esse sint. Adipisicing
              pariatur adipisicing minim et reprehenderit labore amet. Culpa
              excepteur et esse elit qui aliquip enim eu voluptate ut. Laborum
              esse tempor consectetur mollit exercitation non ad adipisicing
              pariatur. Sit id ut eu dolore anim ullamco eu. Aliquip dolore
              Lorem sint velit voluptate. Anim excepteur consequat magna officia
              minim anim Lorem magna culpa tempor aliqua. Quis fugiat nulla
              ipsum. Sint pariatur aliquip proident labore est pariatur aliquip
              in. Veniam laborum do consectetur nostrud nostrud laborum. Quis
              reprehenderit esse et ex amet. Anim amet ex culpa ullamco sunt.
              Aliquip et consequat commodo officia consequat adipisicing eiusmod
              quis aliquip pariatur incididunt dolore. Amet dolore ipsum
              proident laborum id. Nisi sint aute voluptate do in et ut. Dolor
              laboris sunt incididunt et sint ullamco nostrud commodo est magna
              tempor et laborum consequat. Elit ex nostrud deserunt qui dolor
              commodo velit nisi sint incididunt amet. Ut nulla officia in
              reprehenderit irure elit sint ex eiusmod tempor eiusmod culpa
              laborum cillum et. Pariatur nostrud dolor tempor ad incididunt
              incididunt eiusmod officia mollit amet cillum aliqua. Irure ea
              quis ad. Sit cupidatat veniam aliqua non elit ipsum magna dolore.
              Esse ea fugiat ea elit nulla reprehenderit incididunt ullamco
              dolor mollit eiusmod laboris non. Dolor consequat Lorem eiusmod.
              Enim culpa reprehenderit veniam culpa eiusmod nostrud
              reprehenderit dolore tempor ipsum aliquip labore ut fugiat
              consequat. Nostrud excepteur adipisicing consequat. Quis voluptate
              labore dolore officia eiusmod est elit aliqua laborum. Incididunt
              officia qui consequat incididunt laborum proident nisi sunt sint
              aliqua irure aliqua amet. Exercitation incididunt nulla anim qui.
              Veniam occaecat qui tempor et quis culpa aliqua aliquip laboris
              voluptate tempor quis ipsum.
            </div>
          </div>
          <div class="main__inner__content__second">
            <div class="main__inner__content__title-2">Area 2</div>
            <div class="main__inner__content__description-2">
              Reprehenderit voluptate proident incididunt exercitation
              voluptate. Sint ad ad tempor consectetur proident exercitation
              esse consectetur in voluptate veniam dolor. Aute officia aliquip
              irure non quis culpa ut veniam ut. Anim pariatur aliqua cupidatat
              nulla aute pariatur. Dolore pariatur anim commodo aute do laboris
              aute nulla et irure sint duis. Magna exercitation ea mollit eu
              aliqua id in. Dolor ex in irure veniam. Fugiat reprehenderit
              excepteur ullamco dolore do labore labore sit. Ut nulla officia in
              reprehenderit irure elit sint ex eiusmod tempor eiusmod culpa
              laborum cillum et. Pariatur nostrud dolor tempor ad incididunt
              incididunt eiusmod officia mollit amet cillum aliqua. Irure ea
              quis ad. Sit cupidatat veniam aliqua non elit ipsum magna dolore.
              Esse ea fugiat ea elit nulla reprehenderit incididunt ullamco
              dolor mollit eiusmod laboris non. Dolor consequat Lorem eiusmod.
              Enim culpa reprehenderit veniam culpa eiusmod nostrud
              reprehenderit dolore tempor ipsum aliquip labore ut fugiat
              consequat. Nostrud excepteur adipisicing consequat. Quis voluptate
              labore dolore officia eiusmod est elit aliqua laborum. Incididunt
              officia qui consequat incididunt laborum proident nisi sunt sint
              aliqua irure aliqua amet. Exercitation incididunt nulla anim qui.
              Veniam occaecat qui tempor et quis culpa aliqua aliquip laboris
              voluptate tempor quis ipsum. Anim occaecat consectetur enim labore
              commodo minim do voluptate esse culpa ut officia consequat et
              exercitation. Pariatur in dolore labore non. Exercitation commodo
              dolor id culpa fugiat dolore labore. Ullamco exercitation esse et
              officia ullamco est deserunt sunt voluptate Lorem exercitation
              excepteur. Cupidatat ullamco exercitation aute commodo sunt anim
              laborum do consequat mollit dolor dolore. In eiusmod cillum enim
              do amet et laboris nulla mollit. Qui dolore veniam non excepteur
              reprehenderit minim incididunt amet tempor aute magna et occaecat.
              Nulla incididunt do duis. Pariatur dolore amet culpa cillum elit
              ea enim dolor velit. Officia quis commodo anim aliqua culpa.
              Adipisicing in eu ipsum ad culpa cupidatat anim eiusmod sint ad.
              Consectetur non occaecat labore consequat commodo pariatur id
              ipsum cillum. Reprehenderit nulla eiusmod culpa dolore enim veniam
              tempor. Cupidatat nulla eiusmoem magna culpa tempor aliqua. Quis
              fugiat nulla ipsum. Sint pariatur aliquip proident labore est
              pariatur aliquip in. Veniam laborum do consectetur nostrud nostrud
              laborum. Quis reprehenderit esse et ex amet. Anim amet ex culpa
              ullamco sunt. Aliquip et consequat commodo officia consequat
              adipisicing eiusmod quis aliquip pariatur incididunt dolore. Amet
              dolore ipsum proident laborum id. Nisi sint aute voluptate do in
              et ut. Dolor laboris sunt incididunt et sint ullamco nostrud
              commodo est magna tempor et laborum consequat. Elit ex nostrud
              deserunt qui dolor commodo velit nisi sint incididunt amet.
            </div>
          </div>
        </div>
      </div>
      <div class="main__footer">
        Footer
        <button>test</button>
      </div>

.main {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: silver;
  overflow: auto;
}

.main__inner__content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  max-height: 100%;
}

.main__inner__content__first {
  overflow-y: auto;
  background: pink;
}

.main__inner__content__second {
  overflow-y: auto;
  height: 200px;
  background: MediumSeaGreen;
}

.main__inner__content__description-1,
.main__inner__content__description-2 {
  overflow-y: auto;
}
.main__inner__content__description-1 {
  background: lightblue;
}
.main__inner__content__description-2 {
  background: gold;
}

.main__footer {
  flex-shrink: 0;
}

I tried overflow: auto or hidden in some places, and many other things.

Tags: css html

Answers

You’d want to add more vertical flex layouts, namely on .main__inner, .main__inner__content__first and .main__inner__content__second. This is so that the children of these elements can properly adjust their heights properly and induce overflowing. We also apply min-height: 0 in places to override the default min-height: min-content induced by the vertical flex layouts. This is so that these elements can be smaller than their calculated min-content, thus allowing overflow and thus scrolling.

.main {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: silver;
  overflow: auto;
}

.main__inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
}

.main__inner__content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  max-height: 100%;
  min-height: 0;
}

.main__inner__content__first {
  display: flex;
  flex-direction: column;
  background: pink;
  flex-grow: 1;
  min-height: 0;
}

.main__inner__content__second {
  display: flex;
  flex-direction: column;
  height: 200px;
  background: MediumSeaGreen;
  flex-shrink: 0;
}

.main__inner__content__description-1,
.main__inner__content__description-2 {
  overflow-y: auto;
  flex-grow: 1;
  min-height: 0;
}

.main__inner__content__description-1 {
  background: lightblue;
}

.main__inner__content__description-2 {
  background: gold;
}

.main__footer {
  flex-shrink: 0;
}

<div class="main">
  <div class="main__header"></div>
  <div class="main__inner">
    <div class="main__inner__header">HEADER</div>
    <div class="main__inner__content">
      <div class="main__inner__content__first">
        <div class="main__inner__content__title-1">Area 1</div>
        <div class="main__inner__content__description-1">
          Reprehenderit voluptate proident incididunt exercitation voluptate.
          Sint ad ad tempor consectetur proident exercitation esse consectetur
          in voluptate veniam dolor. Aute officia aliquip irure non quis culpa
          ut veniam ut. Anim pariatur aliqua cupidatat nulla aute pariatur.
          Dolore pariatur anim commodo aute do laboris aute nulla et irure sint
          duis. Magna exercitation ea mollit eu aliqua id in. Dolor ex in irure
          veniam. Fugiat reprehenderit excepteur ullamco dolore do labore labore
          sit. Ut nulla officia in reprehenderit irure elit sint ex eiusmod
          tempor eiusmod culpa laborum cillum et. Pariatur nostrud dolor tempor
          ad incididunt incididunt eiusmod officia mollit amet cillum aliqua.
          Irure ea quis ad. Sit cupidatat veniam aliqua non elit ipsum magna
          dolore. Esse ea fugiat ea elit nulla reprehenderit incididunt ullamco
          dolor mollit eiusmod laboris non. Dolor consequat Lorem eiusmod. Enim
          culpa reprehenderit veniam culpa eiusmod nostrud reprehenderit dolore
          tempor ipsum aliquip labore ut fugiat consequat. Nostrud excepteur
          adipisicing consequat. Quis voluptate labore dolore officia eiusmod
          est elit aliqua laborum. Incididunt officia qui consequat incididunt
          laborum proident nisi sunt sint aliqua irure aliqua amet. Exercitation
          incididunt nulla anim qui. Veniam occaecat qui tempor et quis culpa
          aliqua aliquip laboris voluptate tempor quis ipsum. Anim occaecat
          consectetur enim labore commodo minim do voluptate esse culpa ut
          officia consequat et exercitation. Pariatur in dolore labore non.
          Exercitation commodo dolor id culpa fugiat dolore labore. Ullamco
          exercitation esse et officia ullamco est deserunt sunt voluptate Lorem
          exercitation excepteur. Cupidatat ullamco exercitation aute commodo
          sunt anim laborum do consequat mollit dolor dolore. In eiusmod cillum
          enim do amet et laboris nulla mollit. Qui dolore veniam non excepteur
          reprehenderit minim incididunt amet tempor aute magna et occaecat.
          Nulla incididunt do duis. Pariatur dolore amet culpa cillum elit ea
          enim dolor velit. Officia quis commodo anim aliqua culpa. Adipisicing
          in eu ipsum ad culpa cupidatat anim eiusmod sint ad. Cillum labore
          voluptate sunt anim nulla eiusmod laboris aute tempor aute. Ipsum
          excepteur ex sunt cupidatat labore proident nostrud ex minim qui
          veniam non. Velit labore cillum cupidatat ea mollit culpa dolore ex
          sunt. Amet ullamco mollit deserunt. Dolor eu quis excepteur nostrud in
          esse. Pariatur in cupidatat exercitation veniam consectetur sint
          incididunt ut qui magna nisi occaecat. In cillum sunt mollit. Occaecat
          enim veniam duis enim nisi. Voluptate in culpa magna exercitation. Non
          sit magna voluptate incididunt consectetur ex amet consectetur
          excepteur aute consequat enim sunt amet fugiat. Laboris eu pariatur
          nulla ut aute aliquip laboris duis. Officia commodo Lorem commodo
          fugiat fugiat velit non ut consequat velit occaecat. Aute fugiat quis
          aute dolore pariatur mollit occaecat in do commodo fugiat. Consectetur
          non occaecat labore consequat commodo pariatur id ipsum cillum.
          Reprehenderit nulla eiusmod culpa dolore enim veniam tempor. Cupidatat
          nulla eiusmod laboris ullamco fugiat ea fugiat in mollit deserunt
          aliquip esse ullamco esse sint. Adipisicing pariatur adipisicing minim
          et reprehenderit labore amet. Culpa excepteur et esse elit qui aliquip
          enim eu voluptate ut. Laborum esse tempor consectetur mollit
          exercitation non ad adipisicing pariatur. Sit id ut eu dolore anim
          ullamco eu. Aliquip dolore Lorem sint velit voluptate. Anim excepteur
          consequat magna officia minim anim Lorem magna culpa tempor aliqua.
          Quis fugiat nulla ipsum. Sint pariatur aliquip proident labore est
          pariatur aliquip in. Veniam laborum do consectetur nostrud nostrud
          laborum. Quis reprehenderit esse et ex amet. Anim amet ex culpa
          ullamco sunt. Aliquip et consequat commodo officia consequat
          adipisicing eiusmod quis aliquip pariatur incididunt dolore. Amet
          dolore ipsum proident laborum id. Nisi sint aute voluptate do in et
          ut. Dolor laboris sunt incididunt et sint ullamco nostrud commodo est
          magna tempor et laborum consequat. Elit ex nostrud deserunt qui dolor
          commodo velit nisi sint incididunt amet. Reprehenderit voluptate
          proident incididunt exercitation voluptate. Sint ad ad tempor
          consectetur proident exercitation esse consectetur in voluptate veniam
          dolor. Aute officia aliquip irure non quis culpa ut veniam ut. Anim
          pariatur aliqua cupidatat nulla aute pariatur. Dolore pariatur anim
          commodo aute do laboris aute nulla et irure sint duis. Magna
          exercitation ea mollit eu aliqua id in. Dolor ex in irure veniam.
          Fugiat reprehenderit excepteur ullamco dolore do labore labore sit. Ut
          nulla officia in reprehenderit irure elit sint ex eiusmod tempor
          eiusmod culpa laborum cillum et. Pariatur nostrud dolor tempor ad
          incididunt incididunt eiusmod officia mollit amet cillum aliqua. Irure
          ea quis ad. Sit cupidatat veniam aliqua non elit ipsum magna dolore.
          Esse ea fugiat ea elit nulla reprehenderit incididunt ullamco dolor
          mollit eiusmod laboris non. Dolor consequat Lorem eiusmod. Enim culpa
          reprehenderit veniam culpa eiusmod nostrud reprehenderit dolore tempor
          ipsum aliquip labore ut fugiat consequat. Nostrud excepteur
          adipisicing consequat. Quis voluptate labore dolore officia eiusmod
          est elit aliqua laborum. Incididunt officia qui consequat incididunt
          laborum proident nisi sunt sint aliqua irure aliqua amet. Exercitation
          incididunt nulla anim qui. Veniam occaecat qui tempor et quis culpa
          aliqua aliquip laboris voluptate tempor quis ipsum. Cillum labore
          voluptate sunt anim nulla eiusmod laboris aute tempor aute. Ipsum
          excepteur ex sunt cupidatat labore proident nostrud ex minim qui
          veniam non. Velit labore cillum cupidatat ea mollit culpa dolore ex
          sunt. Amet ullamco mollit deserunt. Dolor eu quis excepteur nostrud in
          esse. Pariatur in cupidatat exercitation veniam consectetur sint
          incididunt ut qui magna nisi occaecat. In cillum sunt mollit. Occaecat
          enim veniam duis enim nisi. Voluptate in culpa magna exercitation. Non
          sit magna voluptate incididunt consectetur ex amet consectetur
          excepteur aute consequat enim sunt amet fugiat. Laboris eu pariatur
          nulla ut aute aliquip laboris duis. Officia commodo Lorem commodo
          fugiat fugiat velit non ut consequat velit occaecat. Aute fugiat quis
          aute dolore pariatur mollit occaecat in do commodo fugiat. Consectetur
          non occaecat labore consequat commodo pariatur id ipsum cillum.
          Reprehenderit nulla eiusmod culpa dolore enim veniam tempor. Cupidatat
          nulla eiusmod laboris ullamco fugiat ea fugiat in mollit deserunt
          aliquip esse ullamco esse sint. Adipisicing pariatur adipisicing minim
          et reprehenderit labore amet. Culpa excepteur et esse elit qui aliquip
          enim eu voluptate ut. Laborum esse tempor consectetur mollit
          exercitation non ad adipisicing pariatur. Sit id ut eu dolore anim
          ullamco eu. Aliquip dolore Lorem sint velit voluptate. Anim excepteur
          consequat magna officia minim anim Lorem magna culpa tempor aliqua.
          Quis fugiat nulla ipsum. Sint pariatur aliquip proident labore est
          pariatur aliquip in. Veniam laborum do consectetur nostrud nostrud
          laborum. Quis reprehenderit esse et ex amet. Anim amet ex culpa
          ullamco sunt. Aliquip et consequat commodo officia consequat
          adipisicing eiusmod quis aliquip pariatur incididunt dolore. Amet
          dolore ipsum proident laborum id. Nisi sint aute voluptate do in et
          ut. Dolor laboris sunt incididunt et sint ullamco nostrud commodo est
          magna tempor et laborum consequat. Elit ex nostrud deserunt qui dolor
          commodo velit nisi sint incididunt amet. Ut nulla officia in
          reprehenderit irure elit sint ex eiusmod tempor eiusmod culpa laborum
          cillum et. Pariatur nostrud dolor tempor ad incididunt incididunt
          eiusmod officia mollit amet cillum aliqua. Irure ea quis ad. Sit
          cupidatat veniam aliqua non elit ipsum magna dolore. Esse ea fugiat ea
          elit nulla reprehenderit incididunt ullamco dolor mollit eiusmod
          laboris non. Dolor consequat Lorem eiusmod. Enim culpa reprehenderit
          veniam culpa eiusmod nostrud reprehenderit dolore tempor ipsum aliquip
          labore ut fugiat consequat. Nostrud excepteur adipisicing consequat.
          Quis voluptate labore dolore officia eiusmod est elit aliqua laborum.
          Incididunt officia qui consequat incididunt laborum proident nisi sunt
          sint aliqua irure aliqua amet. Exercitation incididunt nulla anim qui.
          Veniam occaecat qui tempor et quis culpa aliqua aliquip laboris
          voluptate tempor quis ipsum.
        </div>
      </div>
      <div class="main__inner__content__second">
        <div class="main__inner__content__title-2">Area 2</div>
        <div class="main__inner__content__description-2">
          Reprehenderit voluptate proident incididunt exercitation voluptate.
          Sint ad ad tempor consectetur proident exercitation esse consectetur
          in voluptate veniam dolor. Aute officia aliquip irure non quis culpa
          ut veniam ut. Anim pariatur aliqua cupidatat nulla aute pariatur.
          Dolore pariatur anim commodo aute do laboris aute nulla et irure sint
          duis. Magna exercitation ea mollit eu aliqua id in. Dolor ex in irure
          veniam. Fugiat reprehenderit excepteur ullamco dolore do labore labore
          sit. Ut nulla officia in reprehenderit irure elit sint ex eiusmod
          tempor eiusmod culpa laborum cillum et. Pariatur nostrud dolor tempor
          ad incididunt incididunt eiusmod officia mollit amet cillum aliqua.
          Irure ea quis ad. Sit cupidatat veniam aliqua non elit ipsum magna
          dolore. Esse ea fugiat ea elit nulla reprehenderit incididunt ullamco
          dolor mollit eiusmod laboris non. Dolor consequat Lorem eiusmod. Enim
          culpa reprehenderit veniam culpa eiusmod nostrud reprehenderit dolore
          tempor ipsum aliquip labore ut fugiat consequat. Nostrud excepteur
          adipisicing consequat. Quis voluptate labore dolore officia eiusmod
          est elit aliqua laborum. Incididunt officia qui consequat incididunt
          laborum proident nisi sunt sint aliqua irure aliqua amet. Exercitation
          incididunt nulla anim qui. Veniam occaecat qui tempor et quis culpa
          aliqua aliquip laboris voluptate tempor quis ipsum. Anim occaecat
          consectetur enim labore commodo minim do voluptate esse culpa ut
          officia consequat et exercitation. Pariatur in dolore labore non.
          Exercitation commodo dolor id culpa fugiat dolore labore. Ullamco
          exercitation esse et officia ullamco est deserunt sunt voluptate Lorem
          exercitation excepteur. Cupidatat ullamco exercitation aute commodo
          sunt anim laborum do consequat mollit dolor dolore. In eiusmod cillum
          enim do amet et laboris nulla mollit. Qui dolore veniam non excepteur
          reprehenderit minim incididunt amet tempor aute magna et occaecat.
          Nulla incididunt do duis. Pariatur dolore amet culpa cillum elit ea
          enim dolor velit. Officia quis commodo anim aliqua culpa. Adipisicing
          in eu ipsum ad culpa cupidatat anim eiusmod sint ad. Consectetur non
          occaecat labore consequat commodo pariatur id ipsum cillum.
          Reprehenderit nulla eiusmod culpa dolore enim veniam tempor. Cupidatat
          nulla eiusmoem magna culpa tempor aliqua. Quis fugiat nulla ipsum.
          Sint pariatur aliquip proident labore est pariatur aliquip in. Veniam
          laborum do consectetur nostrud nostrud laborum. Quis reprehenderit
          esse et ex amet. Anim amet ex culpa ullamco sunt. Aliquip et consequat
          commodo officia consequat adipisicing eiusmod quis aliquip pariatur
          incididunt dolore. Amet dolore ipsum proident laborum id. Nisi sint
          aute voluptate do in et ut. Dolor laboris sunt incididunt et sint
          ullamco nostrud commodo est magna tempor et laborum consequat. Elit ex
          nostrud deserunt qui dolor commodo velit nisi sint incididunt amet.
        </div>
      </div>
    </div>
  </div>
  <div class="main__footer">
    Footer
    <button>test</button>
  </div>
</div>

Apply .main { display:grid; grid-template-rows:auto auto 1fr auto 100px auto; }:

.main {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto 100px auto;
  text-align: center;
}

.header,
.footer {
  background: gray;
}

.title-pink {
  background: pink;
}

.scrollable {
  overflow-y: auto;
}

.scrollable-blue {
  background-color: lightblue;
}

.title-green {
  background-color: green;
}

.scrollable-orange {
  background-color: orange;
}

<div class="main">
  <div class="header">Fixed header</div>
  <div class="title-pink">Fixed title</div>
  <div class="scrollable scrollable-blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, ipsam tempora necessitatibus at possimus repudiandae error asperiores sit vero recusandae unde eius quaerat numquam. Inventore, voluptates, non consequuntur sit praesentium expedita aperiam quis provident omnis repellat distinctio sed sint modi molestias tempora perspiciatis excepturi nesciunt. Laboriosam asperiores labore aut officiis recusandae incidunt? Illum, molestiae natus rem minima veniam incidunt sapiente debitis soluta architecto ratione. Eum, consequatur, officiis, repudiandae, repellat doloremque officia cumque ut vitae cum adipisci quidem corporis nesciunt iste veritatis molestiae dolore fugiat deserunt commodi doloribus nobis minus voluptates harum voluptatum eveniet quos! Optio, reiciendis sed quas facere esse iusto quasi nemo labore in consequuntur eligendi dolorum nesciunt non praesentium error ipsa molestias. Similique, distinctio, nobis quos officiis tempore provident nihil voluptas quam. Blanditiis, quis, molestiae, fuga officiis maiores maxime animi necessitatibus omnis dignissimos error eaque iusto vel placeat iste magnam laborum fugit ratione doloribus harum quisquam rem adipisci ad libero cumque beatae et similique reiciendis? Quidem, omnis, consequatur, odio alias eius illo voluptatum itaque consectetur soluta nemo delectus accusamus impedit temporibus eaque doloremque sapiente mollitia vel placeat labore culpa voluptas libero inventore provident dolorum reiciendis ullam facere magnam corrupti ea. Error, ad, deserunt eveniet corrupti aliquam autem magni libero ipsum numquam ratione fugiat possimus quo assumenda necessitatibus veniam enim molestias natus culpa eum asperiores quisquam accusamus consectetur optio hic eaque consequuntur incidunt repudiandae nisi earum pariatur dignissimos ipsam totam quos! Necessitatibus, dolore, ducimus eveniet saepe vitae amet architecto natus expedita repellendus et ipsa veniam ut sint id neque quod nostrum quos explicabo! Aperiam, quasi doloribus temporibus nisi modi possimus sit quisquam eligendi iure dolorum. Doloremque, voluptas, illum, natus, molestiae voluptate fugit autem aspernatur qui ab perferendis laborum aperiam nesciunt itaque iste dicta officiis accusamus commodi amet ipsa sapiente deserunt et enim rem quisquam tempora debitis eius quibusdam suscipit vitae voluptatibus quidem maiores quis placeat expedita ad ipsam non sed obcaecati quasi quos cum facere distinctio minima earum repellat excepturi. Non, at, quod a aut cum recusandae animi tenetur asperiores maxime nisi in enim reprehenderit odit repellat ut. Incidunt, maxime, quaerat, vitae minus fugiat fugit rem sequi corrupti ut accusantium dicta est aut illum. Cum, obcaecati, totam, quaerat, alias at amet maiores laborum facilis sed qui ipsam sit tempore quae quia excepturi ea asperiores voluptates eaque voluptate suscipit omnis. Tempore, quisquam, fugit, corporis exercitationem cum consectetur sint magnam atque consequuntur voluptatum porro nobis ipsa quo iusto repellendus doloremque dolores quas ullam alias laboriosam? Assumenda, vel, iure, sequi corporis esse laudantium rerum modi explicabo atque voluptas voluptate repellat aspernatur labore est harum magni voluptatem eveniet accusantium nisi amet. Sequi, qui aperiam pariatur impedit quidem nobis asperiores iste libero est corrupti sunt aut similique nesciunt doloribus deserunt adipisci facilis natus provident perspiciatis voluptates consequatur reiciendis expedita quos voluptate maiores culpa distinctio cum fugit ut officiis? Tempore, eaque, ipsum autem eum sunt quas molestiae reprehenderit excepturi provident eligendi! Sed, libero, cumque, qui consectetur provident quia soluta veritatis similique alias nihil architecto necessitatibus rem quisquam suscipit in voluptas distinctio voluptatibus pariatur iste nesciunt!</div>
  <div class="title-green">Fixed title</div>
  <div class="scrollable scrollable-orange">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, vel, quasi, quos, in id libero a officiis dolorem fugit quae optio dolorum nobis blanditiis ducimus iure non nulla accusantium dolore necessitatibus saepe. Quibusdam, veritatis, quod, mollitia eum quasi assumenda consequatur nulla laudantium harum porro consectetur cum suscipit repellat tenetur totam magnam amet aspernatur quisquam nemo magni praesentium ducimus ratione expedita dolorum voluptate molestias hic placeat eligendi optio ipsum perspiciatis nobis facilis eos! Commodi, necessitatibus saepe quaerat voluptates quo laudantium odio dicta quod! Quam, unde dolorem ipsum doloremque voluptates in suscipit enim cupiditate saepe reiciendis. Laudantium, pariatur, cupiditate recusandae dicta neque quidem tempora fugit quas officia magni voluptas similique animi porro earum illum accusantium aspernatur assumenda cumque quaerat nemo odio dignissimos ex saepe facere harum eligendi vel praesentium nisi modi. In, aut, consequuntur, praesentium minima molestiae minus placeat expedita non a quas maiores alias quae. Animi eligendi nisi unde alias voluptatibus asperiores nemo facere et dignissimos eaque. Nemo, repudiandae, sunt quidem reprehenderit quibusdam tempore vel beatae error dolorem dicta reiciendis maxime quo a impedit perferendis nulla minima quam culpa amet eveniet consectetur modi itaque molestiae aperiam enim optio ut nostrum assumenda vero incidunt asperiores nisi possimus soluta doloribus alias porro rem.</div>
  <div class="footer">Fixed footer</div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Full height div with scrollable and fixed children

Answers