I have a fixed navbar that that positions itself correctly if the page have a scrollbar. But some of my pages appears without a scrollbar and then the navbar jumps to the right.
CSS for my navbar:
header#masthead {
position: fixed;
width: 100%;
}
This makes it work when the scrollbar is visible:
body{
overflow: scroll;
}
Have tried this without sucess, nothing happens:
html {
overflow-y: scroll;
}
My website
header#masthead {
position: fixed;
width: 100vw;
}
Was the solution!
Related
want to show 1 static page contain everything without a scroll
tried to make boddy padding 0 and overflow: hidden but nothing work
also tried the below page-header and background-image code also not work
display: flex!important;
flex-direction: column!important;
min-height: 1vh!important;
}```
```.background-image {flex-grow: 1!important;}
1 page with cover image and footer info, dont know what i am missing to fix that
If you set the body to have an overflow-y of hidden in css it will not allow the user to scroll down the page.
body {
overflow-y: hidden;
}
Go for the root html element, you can style it to:
html {
height: 100%;
width: 100%;
overflow: hidden;
}
The browser will interpret this as the html would use 100% of the usable device width space and hide the rest.
You probably don't want to avoid scrolling but instead make the page elements fit on the screen so there is no scrollbar and still everything is visible.
As a start, you could make the .main class (which only contains your footer) absolutely positioned at the bottom and take it from there
.main {
position: absolute;
bottom: 0;
width: 100%;
}
or, what I'd prefer, set the wrapper to be a flexbox:
UPDATED
body.home {
height: 100%;
overflow: hidden;
}
body.home .wrapper {
display: flex;
flex-direction: column;
}
/* Not needed anymore */
body.home .carousel {
}
body.home .main {
}
I tried this:
<div id="fixed-navigation">...<div>
<div id="content">...<div>
and the CSS:
#fixed-navigation {
position: fixed;
width: auto;
height: 100%;
background: red;
overflow-y: scroll;
}
#content {
background: yellow;
}
See: http://codepen.io/zssz/pen/LGEJOJ
But this hides part of the content div below the fixed div, and setting an arbitrary margin-left or something on #content would just ignore the variable auto width on #fixed-navigation.
So what's the right CSS way to accomplish this seemingly simple use case? (I do want the fixed navigation to be fixed, that is it must always stay on the left side while scrolling through the content)
EDIT: Oh sorry, and I forgot to mention it should work in the majority of actual browsers out there including IE9, so alas not flexbox to the rescue.
Here's a flex box implementation:
http://codepen.io/achisholm/pen/OMPBmp
The essential stuff is...
html, body {
height: 100%;
}
display: flex on the container, in this case body, then...
#fixed-navigation {
flex: 0 0 150px;
height: 100%;
overflow-y: scroll;
}
#content {
flex: 1 0 auto;
height: 100%;
overflow-y: scroll;
}
http://jsfiddle.net/leongaban/6rd2hhpq/8/
I'm working with a fixed position div and making elements scrollable from inside it. Similar to this problem here.
I was able to get the scrollbars to show up, my problem is that I have a fixed header, and my fixed sidebar has to be pushed down in my view.
This allows the user to keep scrolling past the browser window so you lose sight of the scroller.
Is there anyway to keep the scrollbar in view with my example?
So that when the scroller hits and stops at the bottom of the view, you also see the last item.
.red-box {
position: fixed;
width: 100%;
height: 40px;
color: white;
background: red;
}
.sidebar {
position: fixed;
top: 60px;
overflow-y: auto;
margin-left: 20px;
width: 180px;
height: 100%;
}
If I understand the issue correctly - you want the fixed element to fill the screen apart from the header height... then you could try :
.not-stuck {
height: calc(100% - 60px);
}
Looking at the other solutions on the page that was linked to, my personal second choice would be to use JavaScript (but the question doesn't have that tag of course).
I changed the height to 90% and it seemed to work:
.not-stuck {
position: fixed;
top: 60px;
overflow-y: auto;
margin-left: 200px;
width: 180px;
height: 90%;
}
I have a fixed DIV. The page contents should be displayed after the DIV, but they are under the DIV - partially hidden by it. How can I avoid this?
Here is the DIV's style:
#top_div {
position: fixed;
float: left;
top:0;
width: 100%;
height: 20%;
background-color: black;
}
we do not know your entire code, but if it is like
<div id="container">
<div id="fixed">fixed</div>
//a lot of html code here
</div>
put some top-padding to the .container div, padding equal to the height of the fixed div
Take a look at this.
Fixed Div
HTML:
<div>Fixed div</div>Can we see this?
CSS:
div {
position: fixed;
}
Now without fixed
HTML:
<div>Not Fixed div</div>Can we see this?
CSS:
div {
}
Just to show you what the difference is. You can see the div as position: fixed is sitting on top of the content after. The div will stay in that place always on screen. Thats what fixed does. You do not want this (I don't think as you didn't explain what you want it to do) so just remove it.
Example of position:fixed working on a page that can scroll, you will see it is always on the screen.
Example Here
Do not used fixed as this is what causes the problem for you.
I think you are trying to achieve this (http://jsfiddle.net/6Q9w4/8/)
.header {
height: 20%;
background-color: #4679bd;
position: fixed;
width: 100%;
}
.content {
position: absolute;
top: 20%;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
overflow: scroll;
}
I have a div with position: absolute set and it's just a tad bit wider than my browser window. I've successfully hidden the horizontal scroll bar, but I am still able to scroll over with a Macbook trackpad.
Is there any way to circumvent this?
<div id="container">
<div id="big-image"></div>
</div><!-- #container -->
#container {
overflow-x: hidden;
}
#big-image {
background: transparent url('/path/to/image.png') no-repeat center top;
position: absolute;
width: 1307px;
left: 50%;
margin: 0 0 0 -653.5px;
z-index: 4;
}
If you're not limiting the height of #container, just set overflow to hidden, as overflow-x is strange in that it removes the scroll bar, yet still allows you to scroll.
Example
body {
overflow-x: hidden;
}
#container {
overflow: hidden;
width: 100%;
}
You could probably use position: fixed; on the #big-image.