Fixed navbar stays at the top with body occupying 100% of the screen

Question

Fixed navbar stays at the top with body occupying 100% of the screen

In the process of developing a react app, I encountered an issue with a sticky top navbar from Bootstrap. After setting the body to height: 100%, the navbar no longer sticks as intended. I cannot use vh for one of my pages due to mobile content display issues, so I prefer sticking to percentages. Is there any alternative solution for maintaining the sticky behavior while keeping the body height at 100%? Below is the code snippet where I set the body height.

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

css reactjs bootstrap-4 height nav

Answer 1

Answer №1

To achieve the desired layout, you can utilize the position CSS property (https://developer.mozilla.org/en-US/docs/Web/CSS/position).

Additionally, for further control over the stacking order of elements, you may also make use of the z-index property (https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)

Check out this example:

HTML

<div id="container">
  <header>
    <div>content</div>
    <div>content</div>
    <!-- ... -->
    <div>content</div>
    <div>content</div>
  </header>
  <main>
    <!-- ... -->
  </main>
</div>

CSS

#container {
    /* to maintain document flow */
    position: relative;
    height: 100vh;
}

header {
    /* to stick at the top while scrolling */
    position: sticky; 
    top: 0;
    left: 0;
    right: 0;

    /* additional styling */
    background-color: lightblue;
    height: 2rem;
    display: flex;
    justify-content: space-around;
}

main {
  /* to show overflowing content with a scrollbar */
  overflow: auto hidden;

  /* additional styling */
  height: 200%;
  background-color: lightpink;
}

Answer 2

To achieve the desired layout, you can utilize the position CSS property (https://developer.mozilla.org/en-US/docs/Web/CSS/position).

Additionally, for further control over the stacking order of elements, you may also make use of the z-index property (https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)

Check out this example:

HTML

<div id="container">
  <header>
    <div>content</div>
    <div>content</div>
    <!-- ... -->
    <div>content</div>
    <div>content</div>
  </header>
  <main>
    <!-- ... -->
  </main>
</div>

CSS

#container {
    /* to maintain document flow */
    position: relative;
    height: 100vh;
}

header {
    /* to stick at the top while scrolling */
    position: sticky; 
    top: 0;
    left: 0;
    right: 0;

    /* additional styling */
    background-color: lightblue;
    height: 2rem;
    display: flex;
    justify-content: space-around;
}

main {
  /* to show overflowing content with a scrollbar */
  overflow: auto hidden;

  /* additional styling */
  height: 200%;
  background-color: lightpink;
}

Fixed navbar stays at the top with body occupying 100% of the screen

Answer №1

Similar questions

Leveraging Flexbox and flexGrow in conjunction with Textfield

What is the maximum size allowed for a background image in CSS?

Tips for keeping the mobile menu active and responsive

``Need help setting up a fallback source for the Image component in Next.JS? Here's

Utilizing React portals for displaying a modal component upon clicking a table row

Having an issue with HTML and JavaScript where the button won't open when pressed. Any help is appreciated

How to create a dynamic background color animation in jQuery similar to a progress bar animation

What sets apart compressing test.min.css from compressing test.css?

React password eye icon feature designed for numerous input fields

The Bootstrap button is not appearing on my website as expected

jQuery UI smooths out the transitions, making the effect more gradual and fluid

Is it possible to achieve the same functionality as :first-child by employing :nth-of-type without a selector?

HTML text not lining up with SVG text

What is the best way to center and adjust the size of an image in a jumbotron?

Position the image slider uniformly at the bottom using CSS (utilizing the Slick Carousel library)

Switching Present Tab in Rails

What is the best way to handle the parsing of a JSON object in React using lifecycle methods?

Utilize Bootstrap columns to maximize vertical space efficiency

Developing alternatives for CSS Grid

Efficient React search feature with pagination that avoids redundant setState calls