Make sticky footer div with content scroll

Question

I'm trying to make a footer div similar to the Console you see in jsfiddle. The main features, it's sticky to the bottom of the page and when console is collapsed the content above fills the available vertical space. When the console is opened, it displays a scrollbar in the area above if needed, since the console does not overlap the div.

html

<body class="page">
  <div class="content">
  Main Body
  </div>

  <div class="console">
    <section class="header">
      <h5>Console</h5>
    </section>
    <section class="output">
      <ul id="console-output">
        <li>☁️ Running commandline...</li>
        <li>☁️ Running commandline...</li>
        <li>☁️ Running commandline...</li>
        <li>☁️ Running commandline...</li>
        <li>☁️ Running commandline...</li>
        <li>☁️ Running commandline...</li>
        <li>☁️ Running commandline...</li>
      </ul>
    </section>
  </div>
</body>

https://jsfiddle.net/JokerMartini/g895so6q/3/

Answer 1

I reckon a grid is a nice solution.

 document.querySelector('h5').addEventListener('click', evt => { document.querySelector('.page').classList.toggle('console-collapsed') })

 * { box-sizing: border-box; }.page { display: grid; grid-template-rows: 2fr 1fr; height: 96vh; font-family: sans-serif; }.content { overflow-y: scroll; background-color: pink; }.console { overflow-y: scroll; background-color: cyan; }.console h5 { margin: 6px 0; }.page.console-collapsed { grid-template-rows: 2fr auto; }.page.console-collapsed.output { display: none; }

 <body class="page"> <div class="content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque commodo dictum. Cras luctus sapien id risus rhoncus, nec mattis elit suscipit. Curabitur sollicitudin lorem ut lectus vulputate blandit. Suspendisse at faucibus nisi, vel bibendum eros. Morbi tincidunt finibus dolor, at mattis leo iaculis non. Fusce nec mollis ligula, eu placerat turpis. In eros nisi, sodales vitae est ac, porta ornare elit. Fusce ornare varius placerat. Nullam lobortis ut ex feugiat facilisis. Duis id mi ac eros accumsan tempor nec auctor purus. Curabitur euismod est a efficitur porta. Nullam vitae mi tellus. Pellentesque commodo odio id velit semper, id volutpat est tempor. Nunc hendrerit, ex a ornare rhoncus, felis justo lacinia enim, eget lacinia felis neque eu quam. </p> <p> Proin ut mauris nec nulla consectetur tempus sit amet sed dolor. Praesent nec porta augue. Nunc aliquet nisl id orci scelerisque congue. Morbi neque tortor, posuere eget varius id, sodales nec dui. Aliquam commodo sapien et nulla malesuada mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum tellus nec lorem lobortis accumsan. Quisque vitae nisi eros. Mauris sagittis lacinia nisi. Cras semper pretium felis quis tempus. Praesent at condimentum nibh. Aliquam ut egestas est. Pellentesque nec purus nec libero gravida varius. Morbi porta diam a est rutrum fermentum. Quisque ex est, varius id diam sit amet, placerat vehicula arcu. </p> <p> Vivamus ut libero eu nunc accumsan sodales. Sed interdum magna at orci consequat, at vestibulum turpis sollicitudin. Pellentesque vel vulputate lectus. Etiam convallis lacinia erat id hendrerit. Sed eget risus in diam condimentum ornare vitae sed magna. Sed vitae lorem feugiat lorem egestas maximus quis non elit. Integer dignissim neque eu magna porta, eget euismod velit eleifend. Vivamus condimentum condimentum rutrum. </p> <p> Maecenas congue malesuada consectetur. Aenean nunc nulla, semper sit amet diam a, gravida efficitur nunc. Integer tincidunt dui id ligula porta, luctus ullamcorper justo posuere. Ut a libero sodales, aliquet sapien id, scelerisque ligula. Suspendisse a dolor venenatis, lacinia lectus quis, ornare lorem. Cras lacinia metus semper ullamcorper imperdiet. Mauris sollicitudin lacinia odio at sollicitudin. Nunc eget bibendum orci. Sed eros mi, sodales id lorem quis, laoreet tempor risus. Aenean sed gravida lacus. Nullam lacinia, urna eu facilisis interdum, dolor augue luctus odio, id cursus odio enim ac tortor. Nam sed suscipit est, quis cursus dolor. Etiam vitae sodales enim. </p> <p> Donec vitae mattis ex. Phasellus quis diam a eros hendrerit rhoncus ac non mi. Maecenas et mollis nunc, eu mattis elit. Nam ut quam vitae magna euismod tempus at nec nunc. Maecenas et est eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sollicitudin nibh et urna tempus mollis. Proin dictum euismod purus vitae ornare. Quisque vel sem vel sem consequat pretium sit amet eu ante. Duis ullamcorper dui eu convallis convallis. Duis sollicitudin orci ac enim vehicula convallis. Nullam quis turpis non lorem luctus vulputate vitae ac ante. Cras euismod mollis neque. Maecenas feugiat augue ac metus pretium feugiat et eu leo. </p> </div> <div class="console"> <section class="header"> <h5>Console (click here)</h5> </section> <section class="output"> <ul id="console-output"> <li>☁️ Running commandline...</li> <li>☁️ Running commandline...</li> <li>☁️ Running commandline...</li> <li>☁️ Running commandline...</li> <li>☁️ Running commandline...</li> <li>☁️ Running commandline...</li> <li>☁️ Running commandline...</li> <li>☁️ Running commandline...</li> <li>☁️ Running commandline...</li> <li>☁️ Running commandline...</li> </ul> </section> </div> </body>

Make sticky footer div with content scroll

Question

1 answers

solution1
0 2021-11-22 05:45:52

Make sticky footer div with content scroll

Question

1 answers

solution1 0 2021-11-22 05:45:52

solution1
0 2021-11-22 05:45:52