CSS header & footer, scrollable content

Question

I'm struggling with CSS to create scrollable "windows" with fixed header & footer and scrollable content. The accepted answer here is the nearest I have come to solving this, but this requires that one sets the height of the "content" class div.

<!DOCTYPE html>
<head>
<style>
html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  max-height: 100%;
  display: flex;
  flex-direction: column;
}
.header, .footer {
  background: silver;
}
.content {
  flex: 1;
  overflow: auto;
  background: pink;
}
</style>
</head>
<body>
<div class="wrapper">
  <div class="header">Header</div>
  <div class="content" style="height:1000px;">
    Content
  </div>
  <div class="footer">Footer</div>
</div>
</body>

My aims are: 1. If content less than body height, no scroll 2. If content is longer than body height minus header & footer, then scroll.

How to achieve this?

score 1 · Accepted Answer · answered Jan 18 '20 at 18:59

You can use flex or grid :

flex example

body{

margin:0;
}
 .wrapper {
height:100vh;
display:flex;
flex-direction:column;
}
.content {
flex:1;
overflow:auto;
}

/* demo purpose */
.content:hover:before {
content:'';
display:block;
padding-top:150vh;
}

<div class="wrapper">
  <div class="header">Header of any size</div>
  <div class="content" >
    Content
  </div>
  <div class="footer">Footer of any size </div>
</div>

and grid

body {
margin:0;
}
.wrapper {
height:100vh;
display:grid;
grid-template-rows:auto 1fr auto ;
}
.content {
overflow:auto;
}


/* demo purpose */
.content:hover:before {
content:'';
display:block;
padding-top:150vh;
}

<div class="wrapper">
  <div class="header">Header of any size</div>
  <div class="content" >
    Content
  </div>
  <div class="footer">Footer of any size </div>
</div>

tutorials/reminders :

Thank you. Yes using `vh` instead of `%` for height or max-height seems to have solved this — minisaurus, Jan 19 '20 at 13:46

CSS header & footer, scrollable content

1 Answers1