Footer at the bottom and a sticky navigation bar

Question

Footer at the bottom and a sticky navigation bar

I have experimented with various CSS guides in order to place the footer at the bottom of the page, and I have found the example below to be the simplest method.

html,
body,
#root {
  height: 100%;
}

#root {
  display: flex;
  flex-direction: column;
}

nav {
  position: sticky;
  top: 0;
}

section {
  flex: 1;
}

section>div {
  height: 1000px;
}

<div id="root">
  <header>Header</header>
  <nav>Navigation</nav>
  <section>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
  </section>
  <footer>Footer</footer>
</div>

This method successfully places the footer at the bottom of the page, but sometimes the navigation bar does not scroll properly.

The issue may be due to setting the height of the #root element to 100%.

While I can speculate on "why" this problem is occurring, I am unsure of "how" to resolve it while keeping the nav element at the top of the page.

Any assistance would be greatly appreciated.

html css

Answer 1

Answer №1

I believe you are very close to the solution. Simply swap out height:100%; with min-height: 100vh; for the #root element. Additionally, add margin-top: auto; to the footer element.

html,
body {
  height: 100%;
  margin: 0; /*Resetting the default browser margin*/
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /*Ensuring the height covers the entire view port*/
}

nav {
  position: sticky;
  top: 0;
}

section {
  flex: 1;
}

footer {
  margin-top: auto; /*Pushing the footer to the bottom of the page*/
}

<div id="root">
  <header>Header</header>
  <nav>Navigation</nav>
  <section>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
  </section>
  <footer>Footer</footer>
</div>

Answer 2

I believe you are very close to the solution. Simply swap out height:100%; with min-height: 100vh; for the #root element. Additionally, add margin-top: auto; to the footer element.

html,
body {
  height: 100%;
  margin: 0; /*Resetting the default browser margin*/
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /*Ensuring the height covers the entire view port*/
}

nav {
  position: sticky;
  top: 0;
}

section {
  flex: 1;
}

footer {
  margin-top: auto; /*Pushing the footer to the bottom of the page*/
}

<div id="root">
  <header>Header</header>
  <nav>Navigation</nav>
  <section>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
  </section>
  <footer>Footer</footer>
</div>

Answer 3

Answer №2

Implement a JavaScript function to dynamically add the class sticky to the navbar when the user scrolls down the window. This class will give the navbar the following CSS properties:

position: fixed to fix the navbar in place;
top: 0 to keep it at the top of the page;
width: 100% to span the entire width of the screen.

var navbarElement = document.getElementById("navbar");
var navbarScroll = navbarElement.offsetTop;

window.onscroll = function() {
  addClassOnScroll()
};

function addClassOnScroll() {
  if (window.pageYOffset >= navbarScroll) {
    navbarElement.classList.add("sticky")
  } else {
    navbarElement.classList.remove("sticky");
  }
}

html,
body,
#root {
  height: 100%;
  margin: 0;
}

#root {
  display: flex;
  flex-direction: column;
}

header {
  padding: 15px
}

nav {
  top: 0;
  background-color: yellow;
}

section {
  flex: 1;
}

section>div {
  height: 1000px;
}

footer {
  padding: 15px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

<div id="root">
  <header>Header</header>
  <nav id="navbar">Navigation</nav>
  <section>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
  </section>
  <footer>Footer</footer>
</div>

Answer 4

Implement a JavaScript function to dynamically add the class sticky to the navbar when the user scrolls down the window. This class will give the navbar the following CSS properties:

position: fixed to fix the navbar in place;
top: 0 to keep it at the top of the page;
width: 100% to span the entire width of the screen.

var navbarElement = document.getElementById("navbar");
var navbarScroll = navbarElement.offsetTop;

window.onscroll = function() {
  addClassOnScroll()
};

function addClassOnScroll() {
  if (window.pageYOffset >= navbarScroll) {
    navbarElement.classList.add("sticky")
  } else {
    navbarElement.classList.remove("sticky");
  }
}

html,
body,
#root {
  height: 100%;
  margin: 0;
}

#root {
  display: flex;
  flex-direction: column;
}

header {
  padding: 15px
}

nav {
  top: 0;
  background-color: yellow;
}

section {
  flex: 1;
}

section>div {
  height: 1000px;
}

footer {
  padding: 15px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

<div id="root">
  <header>Header</header>
  <nav id="navbar">Navigation</nav>
  <section>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
  </section>
  <footer>Footer</footer>
</div>

Answer 5

Answer №3

Based on the structure of your HTML, it is recommended not to apply any additional styling to the HTML and body elements. Instead, focus on resetting your CSS styles if necessary.

An easy way to achieve this without using JavaScript is by setting the #root element to have a fixed position with a height and width of 100vh and 100vw, respectively. Additionally, ensure there is an overflow property set to auto.

* {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    text-decoration-line: none;
    border: 1px dashed;
}

#root {
    height: 100vh;
    width: 100vw;
    position: fixed;
    background: lightblue;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

nav {
    position: sticky;
    top: 0;
}

section {
    flex: 1;
}

section > div {
    height: 400px;
}

<div id="root">
    <header>Header</header>
    <nav>Navigation</nav>
    <section>
        <div>Test</div>
        <div>Test</div>
        <div>Test</div>
    </section>
    <footer>Footer</footer>
</div>

Answer 6

Based on the structure of your HTML, it is recommended not to apply any additional styling to the HTML and body elements. Instead, focus on resetting your CSS styles if necessary.

An easy way to achieve this without using JavaScript is by setting the #root element to have a fixed position with a height and width of 100vh and 100vw, respectively. Additionally, ensure there is an overflow property set to auto.

* {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    text-decoration-line: none;
    border: 1px dashed;
}

#root {
    height: 100vh;
    width: 100vw;
    position: fixed;
    background: lightblue;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

nav {
    position: sticky;
    top: 0;
}

section {
    flex: 1;
}

section > div {
    height: 400px;
}

<div id="root">
    <header>Header</header>
    <nav>Navigation</nav>
    <section>
        <div>Test</div>
        <div>Test</div>
        <div>Test</div>
    </section>
    <footer>Footer</footer>
</div>

Footer at the bottom and a sticky navigation bar

Answer №1

Answer №2

Answer №3

Similar questions

Steps to activate highlighting for the initial value in a quarterly datepicker

HTML5 canvas processing causing web worker to run out of memory

Looking to add a dynamic divider between two columns that can be adjusted in width by moving the mouse left and right?

The application of CSS transition fails in the context where top property is set as auto

Creating designs on the canvas

What is the best method for ensuring three inside divs have equal heights?

Incorrect data for minimal values within Google charts

Monitor the traffic on my website by implementing .htaccess restrictions

The Electronjs application encountered an error while loading with the message "ReferenceError: require is not defined."

switch the visibility of the p tag based on its content

Is there a way to potentially utilize window.open() to open a specific section of a webpage?

Combine all input values into one using jQuery

CSS Trick: Applying first-of-type selector to specific instances of a div

Adding elements to a roster

What are some effective methods for dynamically styling elements during iteration?

When I try to add more content to my page, it doesn't extend beyond a single page and instead gets compacted together

Interacting with Watir and Cucumber, unfortunately the link is not functional

Is the Packery image grid only functional when the background image is specified in CSS and not in JavaScript? Perhaps we need to look into using Await/Sem

CSS guidelines specifically for when two classes are required to exist simultaneously

Mysterious attributes of angular 6's <table mat-table> tag