I have a fixed header image as my first div, but then I obviously want to have more divs/sections underneath it to complete the webpage.
However when I try and do this, I can still only see the header image and not the div position underneath it.
Anyone know why? Here is the JSFiddle: http://jsfiddle.net/s5atv9c3/
I tried using things like:
top: 0px; //for the fixed element
margin-top: 100%; //for the sub-divs in the container
position: relative/absolute; //for the sub-divs in the container
But none of them worked :/ So yeah all help is appreciated
The way you defined your .header block, it will have a height of 100% of the screen height.
If you want .packages to appear right below .header, set the top margin of .packages to be 100%.
Since the .header is fixed, you need to set the top offset and the z-index as follows:
.header {
top: 0;
z-index: -1;
}
See demo: http://jsfiddle.net/audetwebdesign/u8bt9wda/
You can do following things.
give fixed height to header
.header {
background: url("http://i.imgur.com/GZJVpxU.jpg")
height: 400px; //fixed height
position: fixed;
width: 100%;
background-size:contain;
}
Add padding of header's height into packages
.packages{
padding-top:400px;
}
It is because you give header position:fixed; So, next div position start from top:0; So, they hide back to first fixed div.
To make div visible give top position to second div and position:relative
.packages {
padding: 40px 0;
background: #FFFFFF;
width: 100%;
position: relative;
top: 500px;
}
Check Fiddle.
http://jsfiddle.net/s5atv9c3/2/
Try this:
html, body {
height: 100%;
position: relative;
}
.wrapper {
height: 100%;
}
header {
position: relative;
height: 100%;
}
Fiddle
I am a novice at CSS/HTML and need help with a certain issue. I am trying to make my opening div (w/ background image) cover the entire screen (which I have done successfully). The problem is, no matter what I try, I cannot get the next div to start after the initial div. I am including my HTML and CSS. Problem is that I cannot cause #map-contain to start after #opening. Thought it would simply be 'positioning' issue but I cannot solve this. Please help. http://jsfiddle.net/nELQF/ - (need black div to start at bottom of red div)
HTML
<div id="opening">
</div>
<div id="map-section">
</div>
CSS
html, body {
margin: 0;
padding: 0;
min-height: 100%;
width: 100%;
}
#opening {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid orange;
background-image: url('DSC_0577.JPG');
background-position: center;
background-size: cover;
}
#map-section {
width: 100%;
height: 800px;
background-color: black;
}
Given that the top element is absolutely positioned, you could do the same with the second element and set top:100% in order prevent the elements from overlapping.
Updated Example
#map-section {
width: 100%;
position: absolute;
height: 800px;
top: 100%;
background-color: black;
}
As an alternative, an arguably better approach allowing you to avoid having to absolutely position both elements would be to simply set a height of 100% on the html/body elements.
Example Here
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 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.
How do I push a footer to the bottom of my page? Here is an example of what I currently have: hansmoolman.com
As you can see the footer is pushed underneath my 2 left and right containers. How can I fix this. I have used relative positioning for some elements as the red banner had to be pushed over the header bar and given a + z-index. I found some solutions online to stick the footer to the bottom but this does not solve my problem as the footer still appears aver my 2 columns if the content in them is not big enough to fill the whole page.
So what I want is for the footer to always follow BELOW all the rest of the content (the sticking to the bottom I can solve later).
There is a bit of CSS code so havent added it here, but can add it if needed
Your CSS Looks Like:
#footer {
background-color: #FFFEF0;
border: 1px solid #000000;
clear: both;
height: auto;
margin-top: -100px; /* >> Remove This*/
overflow: hidden;
position: relative;
top: -200px; /* >> Remove This*/
width: 100%;
z-index: -1;
}
Remove following css rules from #footer
top: -200px;
margin-top: -100px;
Try clear:both for your footer container tag, considering it has display:block; set
To align the contents right. You have to make some changes in your css.
First of all remove :
top: -200px;
width: 100%;
z-index: -1;
From your #footer .
And change your #mainContentContainer to :
#mainContentContainer
{
min-height: 400px;
overflow: auto;
position: relative;
width: 100%;
}