skip to Main Content

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.

sketch

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.

2

Answers


  1. 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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search