My requirement is a page with a fixed position header and full border around the page.
Setting this up is simple, but I have a problem with the fixed position header overlapping the page border.
Visually, this shows the problem:
You can see the fixed position header overlaps the border on the right. My aim is to prevent this from happening.
This the relevant block of code I believe - testing this by setting position to relative, for example, will stop the header overlapping the right border, but I need the header to be fixed.
.site-header {
min-height: 100px;
background: blue;
position: fixed;
width: 100%;
z-index: 10;
}
Here is a pen to demonstrate the issue in full:
http://codepen.io/juxprose/pen/vERQQr
Any ideas? I've tried some z-index experiments as that appears to be the issue, but no luck. The 100% width also seems related to the issue. Any pointers much appreciated, thanks.
Try changing your css to this:
.site-header {
min-height: 100px;
background: blue;
position: fixed;
width: 100%;
z-index: -1;
}
.site-main {
position: relative;
margin: 100px 25px;
z-index:-2;
}
It's working on CodePen - hope it works for you too.
http://codepen.io/juxprose/pen/vERQQr
Please add left and right 10px then it will solve
replace width: 100% with right: 10px and left: 10px
.site-header {
min-height: 100px;
background: blue;
position: fixed;
right: 10px;
left: 10px;
z-index: 10;
}
Example: http://codepen.io/anon/pen/yyKGyJ
Result
I have two divs: menu and content. Menu is fixed on the left, and content is centered. The problem is that with lower screen resolutions, the menu overlaps the content.
Here's some css:
#content {
width: 1000px;
min-height: 100%;
margin: 0 auto;
}
#menu {
z-index: 20;
width: 200px;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
So, basically, I want the content to be centered with a left minimum of x px.
Is there an easy solution for that?
just set up a Wrapper div parent to the content div... and give the wrapper margin-left: 100px; or however much you want.. simple as that
you could use min-width
That should be the easiest solution. Otherwise post your code on http://jsfiddle.net/ so we can review it
I've wasted numerous hours on this and cannot seem to get it to work, I've read many answers on here already but none seem to be helping.
I have a header DIV then then two DIV's underneath floated Left of eachother. the menu on the left and content on the right. the right i have set Overflow: hidden so it sits next to the menu div on left and against broswer on right.
Now i want the menu Div on the left to fill the height downwards to match the content div on the right but i cannot for the life of me seem to get the settings right.
The link to website is here http://www.mxbempire.com
Anyone shed some light on this?
im not 100% sure what you are asking.
however using static attributes on your header and menu would give it a 'wiki-feel'
adding this to your CSS will give an example
.menu{position:fixed; top:80px}
.headercontainer{position:fixed; top: 20px;}
.user{padding-left: 200px; float:none;}
.card{margin: 90px 25px 0 250px;}
use this in your css
.headercontainer {
width: 100%;
height: 60px;
margin: 0 auto;
background-color: #2C2E33;
position: fixed;
top: 0;
.two {
float: left;
width: 220px;
position: fixed;
top: 60px;
}
You can try adding this styles to your css:
.headercontainer {
position: fixed;
z-index: 10;
}
.menu {
height: 100vh;
margin-top: 60px;
position: fixed;
}
.three {
margin-left: 220px;
padding-top: 60px;
}
I'm not sure how it will behave on older browsers, soo just try it.
I'm trying to create a sticky footer from an image of 360px height, but I like that 160px of image to be behind the content and 200px to remain sticky.
My css is:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 360px;
background: #049ec4
}
#wrap {
width: 90%;
border-radius: 8px;
background: #809FFF
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 360px;
width: 100%;
background: #049ec4 url("http://phonegap.com/css/images/cloud.jpg") 0 50% repeat-x;
}
http://jsfiddle.net/RC3Za
but is creating a unwanted space, I like css to output like this:
You can change the footer position to relative and instead of using the bottom property, set the top property to -250px or whatever you want. Set the z-index property to -1 to get it behind the wrap.
Take a look here: http://jsbin.com/picazedu/1/edit
EDIT:
A better solution, to avoid the footer being displayed in the middle of the window, is applying the background image to the body and adjusting it with the background-position:bottom left property. Now you can give the footer the height you want to fit the background image where you want: http://jsfiddle.net/YQMyc/4/
I have the following html...
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
And following css...
.header{
position: fixed;
background-color: #f00;
height: 100px;
}
.main{
background-color: #ff0;
height: 700px;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;}
But why the header and footer is not fixed, anything I did wrong? I want only "main" to be scrollable and "header" and "footer" to be at a fixed position. How to do?
+-------------------------------------+
| header | -> at fixed position (top of window)
+-------------------------------------+
| main |
| |
| | -> scrollable as its contents
| | scroll bar is window scroll bar not of main
| |
| |
+-------------------------------------+
| footer | -> at fixed position (bottom of window)
+-------------------------------------+
See this fiddle
My issue was that a parent element had transform: scale(1); this apparently makes it impossible for any element to be fixed inside it. By removing that everything works normally...
It seems to be like this in all browsers I tested (Chrome, Safari) so don't know if it comes from some strange web standard.
(It's a popup that goes from scale(0) to scale(1))
if a parent container contains transform this could happen. try commenting them
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
you need to give width explicitly to header and footer
width: 100%;
Working fiddle
If you want the middle section not to be hidden then give position: absolute;width: 100%; and set top and bottom properties (related to header and footer heights) to it and give parent element position: relative. (ofcourse, remove height: 700px;.) and to make it scrollable, give overflow: auto.
Double-check that you haven't enabled backface-visibility on any of the containing elements, as that will wreck position: fixed. For me, I was using a CSS3 animation library...
Working jsFiddle Demo
When you are working with fixed or absolute values,
it's good idea to set top or bottom and left or right (or combination of them) properties.
Also don't set the height of main element (let browser set the height of it with setting top and bottom properties).
.header{
position: fixed;
background-color: #f00;
height: 100px;
top: 0;
left: 0;
right: 0;
}
.main{
background-color: #ff0;
position: fixed;
bottom: 120px;
left: 0;
right: 0;
top: 100px;
overflow: auto;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;
bottom: 0;
left: 0;
right: 0;
}
I had a similar problem caused by the addition of a CSS value for perspective in the body CSS
body { perspective: 1200px; }
Killed
#mainNav { position: fixed; }
As others pointed out, certain CSS properties on a parent element will prevent position: fixed from working. In my case it was backdrop-filter.
This might be an old topic but in my case it was the layout value of css contain property of the parent element that was causing the issue. I am using a framework for hybrid mobile that use this contain property in most of their component.
For example:
.parentEl {
contain: size style layout;
}
.parentEl .childEl {
position: fixed;
top: 0;
left: 0;
}
Just remove the layout value of contain property and the fixed content should work!
.parentEl {
contain: size style;
}
Another cause could be a parent container that contains the CSS animation property. That's what it was for me.
For anyone having this issue primarily with navbars, not sticking to the top, I found that if any element in the parent container of the positon: fixed; element has a width exceeding 100% - so creating horizontal scrollbars - is the issue.
To solve it set the 'parent element' to have overflow-x: hidden;
You forgot to add the width of the two divs.
.header {
position: fixed;
top:0;
background-color: #f00;
height: 100px; width: 100%;
}
.footer {
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px; width:100%;
}
demo
You didn't add any width or content to the elements. Also you should set padding top and bottom to your main element so the content is not hidden behind the header/footer. You can remove the height as well and let the browser decide based on the content.
http://jsfiddle.net/BrmGr/12/
.header{
position: fixed;
background-color: #f00;
height: 100px;
width:100%;
}
.main{
background-color: #ff0;
padding-top: 100px;
padding-bottom: 120px;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;
width:100%;}
You have no width set and there is not content in the divs is one issue. The other is that the way html works... when all three of fixed, is that the hierarchy goes from bottom to top... so the content is on top of the header since they are both fixed... so in this case you need to declare a z-index on the header... but I wouldn't do that... leave that one relative so it can scroll normally.
Go mobile first on this... FIDDLE HERE
HTML
<header class="global-header">HEADER</header>
<section class="main-content">CONTENT</section>
<footer class="global-footer">FOOTER</footer>
CSS
html, body {
padding: 0; margin: 0;
height: 100%;
}
.global-header {
width: 100%;
float: left;
min-height: 5em;
background-color: red;
}
.main-content {
width: 100%;
float: left;
height: 50em;
background-color: yellow;
}
.global-footer {
width: 100%;
float: left;
min-height: 5em;
background-color: lightblue;
}
#media (min-width: 30em) {
.global-header {
position: fixed;
top: 0;
left: 0;
}
.main-content {
height: 100%;
margin-top: 5em; /* to offset header */
}
.global-footer {
position: fixed;
bottom: 0;
left: 0;
}
} /* ================== */
I had the same issue, my parent was set to transform-style: preserve-3d; removing it did the trick for me.
We'll never convince people to leave IE6 if we keep striving to deliver quality websites to those users.
Only IE7+ understood "position: fixed".
https://developer.mozilla.org/en-US/docs/Web/CSS/position
So you're out of luck for IE6. To get the footer semi-sticky try this:
.main {
min-height: 100%;
margin-bottom: -60px;
}
.footer {
height: 60px;
}
You could also use an iFrame maybe.
This will keep the footer from 'lifting off' from the bottom of the page. If you have more than one page of content then it will push down out of site.
On a philosophical note, I'd rather point IE6 users to http://browsehappy.com/ and spend the time I save hacking for IE6 on something else.
You can use it in the same way because if the parent container has the transform effect, you could create a child where it occupies 100% of the parent container and add a position realtive and then the container that you want to add the position fixed and it works without problems.
might be an answer for some cases https://stackoverflow.com/a/75284271/7874122
TLDR position: fixed is attached to containing element, by which element is positioned. if containing block is different than viewport dimensions, fixed element will be placed according to containing block.