Fixed top bar and navigation menu, with a body that can be scrolled

Question

Fixed top bar and navigation menu, with a body that can be scrolled

My current goal is to achieve the following layout:

<div style="position:absolute; background-color:Transparent; left:0px; right:0px; height:100px; z-index:2;">
    <div style="background-color:Silver; width:1000px; height:100px; margin:0 auto;">
        Header
    </div>
</div>

<!-- Fixed div acting as the body "page" so the scrollbar shows as the page's -->
<div style="position:absolute; left:0px; top:0px; bottom:0px; right:0px; overflow-y:auto; padding-top:100px; z-index:1;">
    <div style="position:relative; width:800px; height:100%; margin:0 auto; padding-right:200px;">
        <div style="background-color:Orange; width:100%; height:900px;">
            Content
        </div>
    </div>
</div>

<div style="position:absolute; left:50%; right:0px; padding-top:100px; z-index:0;">
    <div style="width:500px; float:left;">
        <div style="background-color:Green; float:right; width:200px; ">
            Menu
        </div>            
    </div>
</div>

In the above code snippet, the content is misaligned due to the scrollbar width. How can I adjust its position relative to the rest of the page without factoring in the scrollbar width?

css layout header menu

Answer 1

Answer №1

Based on my understanding of the issue you've described, here is a potential solution: http://example.com/solution

Answer 2

Based on my understanding of the issue you've described, here is a potential solution: http://example.com/solution

Answer 3

Answer №2

<style>
body {
    margin: 0 auto;
}
.container {
    padding: 0px;
    position: relative;
    width: 500px;
}

#header {
    top: 0px;
    left: 0px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#header .container {
    background: blue;
    height: 100px;
}

#content {
    background: green;
    height: 1500px;
    margin-top: 100px;
}
#content .inner {
    margin-right: 200px;
}

#sidebar {
    top: 100px;
    left: 0px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#sidebar .inner {
    background: red;
    height: 200px;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 200px;
}
</style>

<div id="header">
    <div class="container">
        header
    </div>
</div>
<div id="content" class="container">
    <div class="inner">
        content
    </div>
</div>
<div id="sidebar">
    <div class="container">
        <div class="inner">
            sidebar
        </div>
    </div>
</div>

Check out this possible solution on JSFiddle

Answer 4

<style>
body {
    margin: 0 auto;
}
.container {
    padding: 0px;
    position: relative;
    width: 500px;
}

#header {
    top: 0px;
    left: 0px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#header .container {
    background: blue;
    height: 100px;
}

#content {
    background: green;
    height: 1500px;
    margin-top: 100px;
}
#content .inner {
    margin-right: 200px;
}

#sidebar {
    top: 100px;
    left: 0px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#sidebar .inner {
    background: red;
    height: 200px;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 200px;
}
</style>

<div id="header">
    <div class="container">
        header
    </div>
</div>
<div id="content" class="container">
    <div class="inner">
        content
    </div>
</div>
<div id="sidebar">
    <div class="container">
        <div class="inner">
            sidebar
        </div>
    </div>
</div>

Check out this possible solution on JSFiddle

Answer 5

Answer №3

When you set a scroll on the entire page, you may experience the issue of the header and menu disappearing when the content is lengthy.

The design solution you are seeking is similar to the concept of the Holy Grail layout.

To see an example using the flex display, check out this implementation here:

<!DOCTYPE html>
<html style="height: 100%">
  <head>
    <meta charset=utf-8 />
    <title>Holy Grail</title>
    <!-- Reset browser defaults -->
    <link rel="stylesheet" href="reset.css">
  </head>
  <body style="display: flex; height: 100%; flex-direction: column">
    <div>HEADER<br/>------------
    </div>
    <!-- No need for 'flex-direction: row' because it's the default value -->
    <div style="display: flex; flex: 1">
      <div>NAV|</div>
      <div style="flex: 1; overflow: auto">
        CONTENT - START<br/>
        <script>
        for (var i=0 ; i<1000 ; ++i) {
          document.write(" Very long content!");
        }
        </script>
        <br/>CONTENT - END
      </div>
      <div>|SIDE</div>
    </div>
    <div>------------<br/>FOOTER</div>
  </body>
</html>

Answer 6

When you set a scroll on the entire page, you may experience the issue of the header and menu disappearing when the content is lengthy.

The design solution you are seeking is similar to the concept of the Holy Grail layout.

To see an example using the flex display, check out this implementation here:

<!DOCTYPE html>
<html style="height: 100%">
  <head>
    <meta charset=utf-8 />
    <title>Holy Grail</title>
    <!-- Reset browser defaults -->
    <link rel="stylesheet" href="reset.css">
  </head>
  <body style="display: flex; height: 100%; flex-direction: column">
    <div>HEADER<br/>------------
    </div>
    <!-- No need for 'flex-direction: row' because it's the default value -->
    <div style="display: flex; flex: 1">
      <div>NAV|</div>
      <div style="flex: 1; overflow: auto">
        CONTENT - START<br/>
        <script>
        for (var i=0 ; i<1000 ; ++i) {
          document.write(" Very long content!");
        }
        </script>
        <br/>CONTENT - END
      </div>
      <div>|SIDE</div>
    </div>
    <div>------------<br/>FOOTER</div>
  </body>
</html>

Answer 7

Answer №4

One method involves setting fixed heights and utilizing the overflow property for scrollable sections, but this approach is not recommended. It's better to explore implementing a sticky or scrolling header - one that remains visible as users navigate up and down the page - using jQuery or your preferred JavaScript library.

Answer 8

One method involves setting fixed heights and utilizing the overflow property for scrollable sections, but this approach is not recommended. It's better to explore implementing a sticky or scrolling header - one that remains visible as users navigate up and down the page - using jQuery or your preferred JavaScript library.

Answer 9

Answer №5

Have you considered using the position:fixed property to resolve your issue? This can be applied to both the header and menu div elements.

Answer 10

Have you considered using the position:fixed property to resolve your issue? This can be applied to both the header and menu div elements.

Fixed top bar and navigation menu, with a body that can be scrolled

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Incorporating a CSS Module into a conditional statement

A plethora of color choices in a Multi-select Box

Display a message indicating unavailability when no events are scheduled and adjust the background color in FullCalendar

Enhancing WordPress Menus with Icons in PHP

Conceal the rating of WordPress products when they have no ratings

Is it possible to use an SVG image as a border with a variable height in CSS

CSS does not have the capability to style child elements

NextJS - Fullcalendar is experiencing issues with loading its style completely

Changing position with flair in CSS

The appropriate use of spacing after text in the context of HTML and

Positioning Images at the Top of the Screen in React Native

Appear and disappear gradually when hovering

Align these buttons in a vertical position

Expanding Material Ui menu to occupy the entire width of the page

Is there a way to point my Github URL to the index file within a specific folder?

Tips on defining the specific CSS and JavaScript code to include in your Flask application

Utilizing CSS variables and HSLA, create a distinctive linear gradient styling

How can I ensure that my CSS code functions seamlessly across all versions of Internet Explorer from IE6 to the latest release?

How come "display:none" is still occupying space on the page?

What is the best way to display the letter X (Clear) in the Chrome INPUT field with the type