As demonstrated here: http://codepen.io/anon/pen/rVPqeL
I am using 3 simple divs and I want to obtain an effect of a "global" scrollbar that has to go over the header.
The html is very basic
<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 keeps going under the header div. What am I doing wrong?
The below code 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;
}
If I understand correctly you want the scrollbar always ontop. To do so change your css to the following
html{
overflow-y: scroll;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
}
Scroll on html will allow the entire page to have scroll while keeping header static and remove scroll from container.
.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 "no width and height".
Hope it helps :)
EDIT: See this pen: This
Ps. I guess you also want to remove the margin of .content
i tried with replacing position:fixed with position:sticky and added top:0 and it worked well for me, no more overlapping vertical scrollbar.
.header {
position: sticky;
top: 0;
width: 100%;
height: 50px;
background-color: red;
}
Remove overflow-y: scroll; from your .container
put the overflow-y: scroll; inside the body element:
body {
overflow-y: scroll;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
}
Related
I'm trying to create a normal HTML page and I've set the height/width of the body With Vh and Vw
* {
padding: 0;
margin: 0;
}
body {
height: 100vh;
width: 100vw;
background-color: red;
padding: 0;
margin: 0;
overflow: auto;
}
.Top-banner {
position: absolute;
top: 0;
left: 0;
height: 10%;
width: 100%;
background-color: blue;
box-sizing: border-box;
}
.Ad {
position: absolute;
top: 10%;
left: 0;
height: 15%;
width: 100%;
background-color: purple;
text-align: center;
box-sizing: border-box;
}
.Ad .Close-but {
position: absolute;
top: 65%;
left: 5%;
height: 30%;
width: 10%;
background-color: green;
text-align: center;
}
.Main-content {
position: absolute;
top: 25%;
left: 0;
height: 100%;
width: 100%;
background-color: pink;
text-align: center;
box-sizing: border-box;
}
<div class="Top-banner">
</div>
<div class="Ad">
<button class="Close-but">Close</button>
</div>
<div class="Main-content">
</div>
The problem is that an extra content create on the left its the body what am I doing wrong
I cannot put an jsfiddle demo because in the demo this problem don't happen I tried the HTML page in other computers and the same issue
Not sure if understand your question correctly but if your problem is the horizontal scrollbar then simply change 'overflow: auto;' to 'overflow-x: hidden;'
if you don't want a vertical scroll aswell then make 'overflow: hidden;'
body{
height: 100vh;
width: 100vw;
background-color: red;
padding: 0;
margin: 0;
overflow-x: hidden; //change this
}
I am not getting the scroll on the browser. i have tried with overflow: scroll and also with no over flow.
body {
margin: 0;
overflow: scroll;
}
.left {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 320px;
background-color: #1f1f1f;
color: white;
text-align: center;
}
.slide {
position: fixed;
top: 0;
right: 0;
height:450px;
width: 1041px;
background-color: orange;
text-align: center;
}
.meanu {
position: fixed;
top: 50%;
bottom: 50%;
width: 80%;
left: 20%;
right: 0;
}
That is because everything is position:fixed and these elements do not affect the flow.
As far as scrolling is concerned, the fixed positioned elements do not exist.
body, html {
height: 100%;
}
#nav-left {
width: 155px;
min-height: 100%;
background-color: #292a28;
position: absolute;
z-index: 10;
}
When on my page, height growing up (dynamic), my height on div did not growing up.page
Try this
html, body {
position: relative;
padding: 0;
margin: 0;
height: 100%;
}
#nav-left {
width: 155px;
min-height: 100%;
background-color: #292a28;
position: absolute;
z-index: 10;
}
Working example: http://liveweave.com/9gb8mF
I am using two divs to create the look of a two-tone background. behind my container div, the left side is blue and the right side is yellow. My css for these column divs is:
#bluecol{
height:100%;
background-color: #5C8AE6;
display: inline;
float: none;
left: 0px;
overflow-x: hidden;
overflow-y: hidden;
position: absolute;
top: 0px;
width: 50%;
z-index: -5;}
and for the yellowcol is the same, except positioned to the right, naturally. Currently both divs works fine but I cannot get them to match the height of the content within my container, I can only set the height manually or to 100%, which only takes up the browser's window. My container is set to height:max-content so is unhelpful in this situation.
I want the two column divs to match whatever the containers height is. Any suggestions would be great!
Js fiddle: https://jsfiddle.net/ak0kp9xd/
Try like this: Demo
html, body {
height: 100%;
overflow: hidden;
position: relative;
}
#bluecol {
height:100%;
background-color: #5C8AE6;
display: inline;
float: none;
left: 0px;
overflow-x: hidden;
overflow-y: hidden;
position: absolute;
top: 0px;
width: 50%;
z-index: -5;
}
#yellowcol {
height:100%;
background-color: rgb(255, 204, 0);
display: inline;
float: none;
right:0px;
overflow-x: hidden;
overflow-y: hidden;
position: absolute;
top: 0px;
width: 50%;
z-index: -5;
}
#container {
background-color:#E5ECFB;
font-family:'calibri';
margin:10px;
overflow:hidden;
z-index:5;
font-size:medium;
height: 100%;
}
Your background blocks must be inside #container to take it's height.
Also you can use :before to reduce HTML markup:
#container {
position: relative;
background-color: rgb(255, 204, 0);
padding: 10px;
}
#container:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
background-color: #5C8AE6;
display: block;
z-index: 1;
}
#container .content {
position: relative;
z-index: 10;
background-color: #E5ECFB;
border-right: 11px solid #FFE994;
border-left: 11px solid #AFC6F3;
}
<div id="container">
<div class="content">Whatever</div>
</div>
I am not sure if this is possible, without some JavaScript at lest. What i am trying to do is keep the content in the sidebar within the viewport for horizontal scroll but not vertical scroll (this issue occurs on low resolutions). I have put together a quick js fiddle to demonstrate the issue http://jsfiddle.net/evkhvvdr/ any input is greatly appreciated.
Here is the CSS or view the js fiddle
body {
position: relative;
margin: 0;
}
.sidebar {
position: absolute;
top: 0;
bottom: 0;
width: 100px;
background: blue;
left: 0;
}
.sidebar-inner {
position: fixed;
left: 0;
}
.content {
width: 1400px;
background: pink;
height: 2000px;
}
You can fix sidebar on screen, but put it under content with z-index, so when you scroll, you scroll only content, sidebar is still on screen, but under the content.
body {
margin: 0;
}
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100px;
background: blue;
z-index: 0;
}
.sidebar-inner {
width: 100px;
position: relative;
left: 0;
}
.content {
position: absolute;
width: 1400px;
background: pink;
height: 2000px;
margin-left: 100px;
}