Search code examples
cssfixed

Fixed container positioned on top of the body's scroll

We are experencing Fixed container positioned on top of the body's scroll ( even with: box-sizing: border-box;), with those styles:

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
z-index: 100;
width: 100%;
height: 71px;
background-color: #115191;
box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.1);
font-family: 'Lato', sans-serif;
position: fixed;
top: 0;
box-sizing: border-box;

enter image description here

but if I set the width, like this:

width: calc(100% - 17px )

then is what we expect ( at least in chrome, other browsers/versions must have a different scroll width)

enter image description here

The styles of html tag:

height: 100%;
overflow-y: auto;

body:

padding: 0;
margin: 0;
background-color: #f7f7f7;
min-height: 100%;

any idea wha'ts causing this and how to prevent it?

thanks

Solution

  • You can remove scroll from html, body elements and add it to content wrapper. In this example it is main element.

    Html example

    <body>
  <header>Header</header>
  <main>
    <!--All page content goes here-->
  </main>
</body>

    Remove dafault page scroll 

    body, html {
  height: 100%;
  overflow: hidden;
}

    Add scroll and height for content wrapper

    main {
  margin-top: 40px;
  height: calc(100% - 40px);
  overflow: auto;
}

    40px here is the height of the fixed header.

    header {
  ...
  height: 40px;
  ...
}


    body, html {
  height: 100%;
  overflow: hidden;
  
  /*Some reset styles*/
  margin: 0;
  font-family: sans-serif;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  
  display: flex;
  align-items: center;
  
  height: 40px;
  background-color: gainsboro;
}

main {
  margin-top: 40px;
  height: calc(100% - 40px);
  overflow: auto;
}

header, main {
  padding-left: 15px;
  padding-right: 15px;
}
    <header>Header</header>
<main>
  <h1>Title</h1>
  <h2>Title 2</h2>
  <h3>Title 3</h3>
  <p>The Lost World is a novel released in 1912 by Sir Arthur Conan Doyle concerning an expedition to a plateau in the Amazon basin of South America where prehistoric animals (dinosaurs and other extinct creatures) still survive. It was originally published serially in the popular Strand Magazine and illustrated by New-Zealand-born artist Harry Rountree during the months of April–November 1912. The character of Professor Challenger was in thrusting book. The novel also describes a war between indigenous people and a vicious tribe of ape-like creatures.</p>
  <p>The Lost World is a novel released in 1912 by Sir Arthur Conan Doyle concerning an expedition to a plateau in the Amazon basin of South America where prehistoric animals (dinosaurs and other extinct creatures) still survive. It was originally published serially in the popular Strand Magazine and illustrated by New-Zealand-born artist Harry Rountree during the months of April–November 1912. The character of Professor Challenger was in thrusting book. The novel also describes a war between indigenous people and a vicious tribe of ape-like creatures.</p>
</main>