having problems defining a sub-layout, cannot find the proper way to give an element all the height-CodePudding

i have a main layout defined as

html {
    overflow: hidden;
}

body {
    min-height: 100vh;
}

.wrapper-mobile {
    display: grid;
    height: 100vh;
    grid-template-rows: auto 1fr auto;
}

.wrapper-web {
    display: grid;
    height: 100vh;
    grid-template-rows: auto 1fr;
}

.content {
    overflow-y: auto;
}

A simple fixed header and footer with a scrollable main area ( content class ), in the mobile version or just fixed header and main otherwise.

<div >
    <header>header area</header>
    <main >main area</main>
    <section>footer area</section>
</div>

Now, inside this main area, I would like to define another layout, where a "actions" section sits just above the footer ( if mobile ), while the top area fill all the rest of the available space.

I have tried to defined this sub-layout as grid also

.sub-layout {
    display: grid;
    grid-template-rows: 1fr 80px;
    height: 100vh;
}

or with flexbox, but the actions section

<div >
    <div>main</div>
    <section>actions</section>
</div>

gets pushed beyond sight, only visible if scrolling down. what am I missing here ?

CodePudding user response：

This can be done with nested grids and a media query, I chose breakpoint 768px, edit accordingly in the CSS. Setup using a mobile first approach

You can click on the red header to toggle the purple actions on/off

/* START: IGNORE THESE STYLES */
body { color: white; font: 16px sans-serif; margin: 0 }
header { background-color: red }
main { background-color: green }
nav { background-color: purple }
footer { background-color: blue }
header, nav, footer, main .main-inner { padding: .5rem 1rem }
main>*:first-child {  margin-top: 0 } main>*:last-child {  margin-bottom: 0 }
/* END: IGNORE THESE STYLES */



/* START STYLES FOR ANSWER */
.wrapper-mobile {
  display: grid;
  height: 100vh;
  grid-template-rows: auto 1fr auto;
}

.wrapper-mobile main, .wrapper-mobile main .main-inner { min-height: 0 }

.wrapper-mobile main { display: grid }
.wrapper-mobile main .main-inner { overflow-y: auto }

.wrapper-mobile.no-actions main nav { display: none }

@media (min-width: 768px) {
  .wrapper-mobile { grid-template-rows: auto 1fr }
  .wrapper-mobile footer { display: none }
}

<div >
  <header onclick="this.parentElement.classList.toggle('no-actions')">header area</header>
  <main>
    <div >
      <p>Condimentum dui habitasse massa vestibulum lectus eu nisl libero sagittis at donec duis per urna tristique. Imperdiet pharetra magna adipiscing turpis a dictum a a suspendisse nibh torquent parturient cursus parturient iaculis ultricies ullamcorper
        montes. A molestie a a nullam accumsan odio bibendum mi id suspendisse dis ullamcorper volutpat fermentum mi consectetur elit ultricies parturient parturient a fames nisl a a aptent. A faucibus consectetur magnis nibh pretium a in curae fringilla
        eget gravida donec dolor fringilla ac condimentum cras eu.</p>
      <p>Commodo massa convallis consectetur a mi nisi scelerisque volutpat dis at purus vestibulum justo adipiscing montes orci magna ut faucibus convallis id nullam ridiculus ultricies. Vehicula sociosqu nec parturient leo vestibulum porta suspendisse
        pharetra a et senectus sagittis auctor ac taciti at adipiscing. Proin aenean aenean vestibulum id a scelerisque id parturient a cubilia fermentum curae cursus senectus facilisis cursus nostra. Velit aliquet ut posuere venenatis tempor ac nascetur
        mollis sit dui tempor eget enim ullamcorper porta morbi ad ante a cubilia malesuada integer. Scelerisque condimentum at penatibus facilisi ligula donec cras fames mi penatibus ullamcorper adipiscing nibh purus parturient condimentum. Primis congue
        scelerisque adipiscing gravida condimentum dapibus suscipit rutrum posuere felis a cras parturient pretium torquent justo vestibulum.</p>
      <p>Vestibulum nam curae massa ac suspendisse scelerisque justo consectetur parturient nam bibendum parturient egestas faucibus potenti. Vestibulum a est sit fringilla sit ipsum sapien pharetra vestibulum rhoncus vehicula accumsan vestibulum magna porttitor
        accumsan scelerisque nulla id. Id imperdiet conubia adipiscing proin ullamcorper natoque molestie libero blandit justo curabitur vestibulum id a lobortis a a ullamcorper dis mi arcu fames a non condimentum sit scelerisque.</p>
      <p>Nec praesent litora scelerisque nibh pretium venenatis lorem quam posuere interdum semper a vitae eu condimentum tristique duis dapibus parturient suspendisse taciti hendrerit tempor eros a cum ac. Nisl himenaeos dictumst et parturient tristique
        adipiscing adipiscing scelerisque libero suspendisse adipiscing aenean parturient adipiscing at amet a parturient venenatis etiam velit est cursus fermentum. Eu magna interdum diam a vulputate a blandit mollis ullamcorper id dictumst magnis feugiat
        in dis consectetur suspendisse integer mus turpis adipiscing id vestibulum.</p>
      <p>Condimentum dui habitasse massa vestibulum lectus eu nisl libero sagittis at donec duis per urna tristique. Imperdiet pharetra magna adipiscing turpis a dictum a a suspendisse nibh torquent parturient cursus parturient iaculis ultricies ullamcorper
        montes. A molestie a a nullam accumsan odio bibendum mi id suspendisse dis ullamcorper volutpat fermentum mi consectetur elit ultricies parturient parturient a fames nisl a a aptent. A faucibus consectetur magnis nibh pretium a in curae fringilla
        eget gravida donec dolor fringilla ac condimentum cras eu.</p>
      <p>Commodo massa convallis consectetur a mi nisi scelerisque volutpat dis at purus vestibulum justo adipiscing montes orci magna ut faucibus convallis id nullam ridiculus ultricies. Vehicula sociosqu nec parturient leo vestibulum porta suspendisse
        pharetra a et senectus sagittis auctor ac taciti at adipiscing. Proin aenean aenean vestibulum id a scelerisque id parturient a cubilia fermentum curae cursus senectus facilisis cursus nostra. Velit aliquet ut posuere venenatis tempor ac nascetur
        mollis sit dui tempor eget enim ullamcorper porta morbi ad ante a cubilia malesuada integer. Scelerisque condimentum at penatibus facilisi ligula donec cras fames mi penatibus ullamcorper adipiscing nibh purus parturient condimentum. Primis congue
        scelerisque adipiscing gravida condimentum dapibus suscipit rutrum posuere felis a cras parturient pretium torquent justo vestibulum.</p>
      <p>Vestibulum nam curae massa ac suspendisse scelerisque justo consectetur parturient nam bibendum parturient egestas faucibus potenti. Vestibulum a est sit fringilla sit ipsum sapien pharetra vestibulum rhoncus vehicula accumsan vestibulum magna porttitor
        accumsan scelerisque nulla id. Id imperdiet conubia adipiscing proin ullamcorper natoque molestie libero blandit justo curabitur vestibulum id a lobortis a a ullamcorper dis mi arcu fames a non condimentum sit scelerisque.</p>
      <p>Nec praesent litora scelerisque nibh pretium venenatis lorem quam posuere interdum semper a vitae eu condimentum tristique duis dapibus parturient suspendisse taciti hendrerit tempor eros a cum ac. Nisl himenaeos dictumst et parturient tristique
        adipiscing adipiscing scelerisque libero suspendisse adipiscing aenean parturient adipiscing at amet a parturient venenatis etiam velit est cursus fermentum. Eu magna interdum diam a vulputate a blandit mollis ullamcorper id dictumst magnis feugiat
        in dis consectetur suspendisse integer mus turpis adipiscing id vestibulum.</p>
      <p>Condimentum dui habitasse massa vestibulum lectus eu nisl libero sagittis at donec duis per urna tristique. Imperdiet pharetra magna adipiscing turpis a dictum a a suspendisse nibh torquent parturient cursus parturient iaculis ultricies ullamcorper
        montes. A molestie a a nullam accumsan odio bibendum mi id suspendisse dis ullamcorper volutpat fermentum mi consectetur elit ultricies parturient parturient a fames nisl a a aptent. A faucibus consectetur magnis nibh pretium a in curae fringilla
        eget gravida donec dolor fringilla ac condimentum cras eu.</p>
      <p>Commodo massa convallis consectetur a mi nisi scelerisque volutpat dis at purus vestibulum justo adipiscing montes orci magna ut faucibus convallis id nullam ridiculus ultricies. Vehicula sociosqu nec parturient leo vestibulum porta suspendisse
        pharetra a et senectus sagittis auctor ac taciti at adipiscing. Proin aenean aenean vestibulum id a scelerisque id parturient a cubilia fermentum curae cursus senectus facilisis cursus nostra. Velit aliquet ut posuere venenatis tempor ac nascetur
        mollis sit dui tempor eget enim ullamcorper porta morbi ad ante a cubilia malesuada integer. Scelerisque condimentum at penatibus facilisi ligula donec cras fames mi penatibus ullamcorper adipiscing nibh purus parturient condimentum. Primis congue
        scelerisque adipiscing gravida condimentum dapibus suscipit rutrum posuere felis a cras parturient pretium torquent justo vestibulum.</p>
      <p>Vestibulum nam curae massa ac suspendisse scelerisque justo consectetur parturient nam bibendum parturient egestas faucibus potenti. Vestibulum a est sit fringilla sit ipsum sapien pharetra vestibulum rhoncus vehicula accumsan vestibulum magna porttitor
        accumsan scelerisque nulla id. Id imperdiet conubia adipiscing proin ullamcorper natoque molestie libero blandit justo curabitur vestibulum id a lobortis a a ullamcorper dis mi arcu fames a non condimentum sit scelerisque.</p>
      <p>Nec praesent litora scelerisque nibh pretium venenatis lorem quam posuere interdum semper a vitae eu condimentum tristique duis dapibus parturient suspendisse taciti hendrerit tempor eros a cum ac. Nisl himenaeos dictumst et parturient tristique
        adipiscing adipiscing scelerisque libero suspendisse adipiscing aenean parturient adipiscing at amet a parturient venenatis etiam velit est cursus fermentum. Eu magna interdum diam a vulputate a blandit mollis ullamcorper id dictumst magnis feugiat
        in dis consectetur suspendisse integer mus turpis adipiscing id vestibulum.</p>
    </div>
    <nav>actions</nav>
  </main>
  <footer>footer area</footer>
</div>

CodePudding user response：

I guess the problem is the height of .wrapper-mobile and .sub-layout. You have given height: 100vh to both of them. Try to reduce height of .sub-layout.