[ANSWERED] html – CSS header & footer, scrollable content

Question 1

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 :

Question 2

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?

Bollate

[ANSWERED] html – CSS header & footer, scrollable content

By

Solution 1 :

Problem :

Comments

Comment posted by minisaurus

By

Related Post

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate