Nested DIV with sticky header & footer and scrollable content

user_200759 0
Viewed 116

I have a complex html page where for a certain div I need it to have a sticky header & footer and scrollable content. I've found samples on how to do this on an whole page, but it doesn't;t work on an arbitrary div.

Here is my attempt with a simplified version of my situation

/* Required */
body {
  margin: 0;
  height: 100%;
}

#wrapper {
  height: 100vh;
  display: grid;
  grid-template-rows: 30px 1fr 30px;
}

#content {
  overflow-y: scroll;
}

/* Optional */
#wrapper > * {
  padding: 5px;
}

#header {
  background-color: #ff0000ff;
}

#content {
  background-color: #00ff00ff;
}

#footer {
  background-color: #0000ffff;
}

.app-wrapper {
  height: 100vh;
  display: grid;
  grid-template-rows: 64px 1fr;
}

.sub-header {
  background: yellowgreen;
}


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="app-wrapper">
  <div class="sub-header">
    Some content here
  </div>
  <div id="wrapper">
    <div id="header">Header Content</div>
    <div id="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
    </div>
    <div id="footer">Footer Content</div>
  </div>
</div>
</body>
</html>

as a result I do get 2 scrollbars enter image description here

if I add overflow: hidden for the .app-wrapper then I don't see anymore the footer from my div.

How do I solve this nicely?

flexbox css html
1 Answers

overflow: hidden hides everything that div represents so that's why when you put it on .app-wrapper you cant see the end of the footer. But if you are able to only hide the scrollbar you will be relieved. So here what I did;


body {
  margin: 0;
  height: 100%;
}

#wrapper {
  height: 100vh;
  display: grid;
  grid-template-rows: 30px 1fr 30px;
}

#content {
  overflow-y: scroll;
}

/* Optional */
#wrapper > * {
  padding: 5px;
}

#header {
  background-color: #ff0000ff;
}

#content {
  background-color: #00ff00ff;
}

#footer {
  position:sticky;
  bottom:0;
  background-color: #0000ffff;
}
::-webkit-scrollbar { // to hide scrollbar
  display: none;
}

.app-wrapper {
  height: 100vh;
  display: grid;
  grid-template-rows: 64px 1fr;
  overflow: auto;
  
}

.sub-header {
  background: yellowgreen;
}
user_153474940
Related