Header and footer that stick in place while content scrolls automatically

Question

Header and footer that stick in place while content scrolls automatically

To create a layout where the header and footer remain sticky while the content has a minimum height and shows a scrollbar when the viewport is too small, I found success with this codepen: http://codepen.io/DlafCreative/pen/wzdOEN inspired by another source.

However, I ran into issues with the HTML markup not fitting well with the Angular2 framework I am using. The <header> being on the same level as <main>, and the <footer> outside <prop-wrapper>.

In my application, the header needs to stay consistent across all pages, while the footer should be dynamic. Ideally, I would like the <header> before <prop-wrapper> and the <footer> after <main> as shown in this forked codepen: http://codepen.io/DlafCreative/pen/xEAXxy. This structure would make it easier to define the content.

I am currently struggling to achieve the same behavior with the new markup. Any help or suggestions would be greatly appreciated. Thank you!

html angular css

Answer 1

Answer №1

Here is a helpful guide on how to achieve the desired layout:

To start, remove the default margin of the browser by adding the following CSS:
```
body {
  margin: 0;
}
```
Turn your prop-body into a flexbox with display: flex. Set flex-direction: column for a vertical layout and use height: 100vh to occupy the entire screen height:
```
prop-body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
```
Apply flex: 1 to prop-wrapper to fill the space between the header and footer.

This shorthand implies:

a. flex-grow is 1 b. flex-shrink is 1

This ensures that the height of this flex item adjusts to fill any remaining space.

Refer to the meaning of flex: 1 here.

flex: Equivalent to flex: 1 0. This makes the flex item flexible and sets the flex basis to zero, allowing it to take up the specified proportion of free space in the flex container. When all items in the flex container follow this pattern, their sizes will be proportional based on the assigned flex factor.

You can now visualize the layout easily as we utilize nested flexboxes for organization.

body {
  margin: 0;
}
prop-body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
prop-body header {
  background: grey;
  padding: 20px;
}
prop-body prop-wrapper {
  display: flex;
  flex-direction: column;
  background: lightblue;
  flex: 1;
}
prop-body prop-wrapper main {
  overflow-y: auto;
  flex: 1;
}
prop-body prop-wrapper main p {
  padding: 50px;
}
footer {
  display: flex;
  background: pink;
  min-height: 50px;
  height: 10vh;
}
footer .footer-content {
  flex: 1;
  background: plum;
}

<prop-body>
  <header>Header</header>
  <prop-wrapper>
    <main>
      <p>CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
        CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</p>
    </main>
    <footer>
      <div class="footer-content">
        Footer
      </div>
    </footer>
  </prop-wrapper>
</prop-body>

Answer 2

Here is a helpful guide on how to achieve the desired layout:

To start, remove the default margin of the browser by adding the following CSS:
```
body {
  margin: 0;
}
```
Turn your prop-body into a flexbox with display: flex. Set flex-direction: column for a vertical layout and use height: 100vh to occupy the entire screen height:
```
prop-body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
```
Apply flex: 1 to prop-wrapper to fill the space between the header and footer.

This shorthand implies:

a. flex-grow is 1 b. flex-shrink is 1

This ensures that the height of this flex item adjusts to fill any remaining space.

Refer to the meaning of flex: 1 here.

flex: Equivalent to flex: 1 0. This makes the flex item flexible and sets the flex basis to zero, allowing it to take up the specified proportion of free space in the flex container. When all items in the flex container follow this pattern, their sizes will be proportional based on the assigned flex factor.

You can now visualize the layout easily as we utilize nested flexboxes for organization.

body {
  margin: 0;
}
prop-body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
prop-body header {
  background: grey;
  padding: 20px;
}
prop-body prop-wrapper {
  display: flex;
  flex-direction: column;
  background: lightblue;
  flex: 1;
}
prop-body prop-wrapper main {
  overflow-y: auto;
  flex: 1;
}
prop-body prop-wrapper main p {
  padding: 50px;
}
footer {
  display: flex;
  background: pink;
  min-height: 50px;
  height: 10vh;
}
footer .footer-content {
  flex: 1;
  background: plum;
}

<prop-body>
  <header>Header</header>
  <prop-wrapper>
    <main>
      <p>CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
        CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</p>
    </main>
    <footer>
      <div class="footer-content">
        Footer
      </div>
    </footer>
  </prop-wrapper>
</prop-body>

Header and footer that stick in place while content scrolls automatically

Answer №1

Similar questions

What could be the reason for Chrome breaking up this straightforward bootstrap header into two lines?

Maintaining the state of perspectives

Difficulty setting up AngularFire in Ionic application

Is there a way for me to choose the item from the search dropdown so that it fills in the search input field automatically?

Tips for optimizing loading speed by implementing pagination with HTML, jQuery, PHP, and MySQL on the go

Compiling the project using ng build without requiring the download of node

Cut off text in a dropdown button using Bootstrap 4

What is the best URL structure to use?

Having difficulty incorporating a video into the background

After applying 'all: unset;' to remove all styles, the CSS hyphens property does not work as expected in Chrome

Tips for managing the outcome of an HTTP Post request

When a media query is activated, the Flex item mysteriously vanishes from

Having issues with Angular 2/4 unable to read an object within the initForm() function

I'm experiencing issues with event.preventDefault() not functioning properly when used within a contenteditable div

Click to make the arrow come to life through animation!

Ways to reach the standard look

Refresh the CSS without having to reload the entire page

Remove a div using JavaScript

Utilize PHP to generate a table from data

A guide to building a versatile component using Ionic 3 and Angular 4