Fixed div with 100% width overlaps scrollbar
As shown here: http://codepen.io/anon/pen/rVPqeL
I am using 3 simple divs and I want to get the effect of a "global" scrollbar that should light up on top .
html is very simple
<div class="container">
<div class="header">
</div>
<div class="content">
</div>
</div>
and here's the css:
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
overflow-y: scroll;
}
.header {
position: fixed;
width: 100%;
height: 50px;
background-color: red;
}
.content {
margin-top: 50px;
min-height: 2500px;
background-color: blue;
}
The scrollbar continues below the heading div. What am I doing wrong?
source to share
.container {
margin-top:50px; /* create room for header*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
overflow-y: scroll;
}
.header {
margin-top:-50px; /* move up by 50px*/
position: fixed;
width: 100%;
height: 50px;
background-color: red;
}
fixed positioned elements have "width and height".
Hope this helps :)
EDIT: See this feather: This
Ps. I think you also want to remove the border.content
source to share
If I understood correctly, you want the scrollbar to always be at the beginning. To do this, change your css to the following
html{
overflow-y: scroll;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
}
Scrolling in html will allow the entire page to have scrolling, keeping the title static and removing the scrolling from the container.
source to share
The code below does the trick http://codepen.io/anon/pen/XbOxgp
.container {
background-color: gray;
overflow-y: scroll;
}
.header {
position: fixed;
width: 100%;
height: 50px;
background-color: red;
z-index: 2;
}
.content {
z-index: 1;
width: 100%;
position: absolute;
top: 60px;
min-height: 2500px;
background-color: blue;
}
source to share