I want to have a header DIV and a footer DIV always displayed on my web page, regardless of when you scroll down the page.
How do I accomplish this using only CSS (without IFRAMES)
For example:
<div id=header>Always display on top, regardless if you have scrolled down the page</div>
<div id=main_content>...</div>
<div id=footer>Always display on the bottom</div>
If you can avoid IE 6 then you can use position: fixed.
Something like
<style type="text/css">
#header { position: fixed; top: 0px; }
#main_content { height: 1200px; }
#footer { position: fixed; bottom: 0px; }
</style>
<div id=header>
Always display on top, regardless if you have scrolled down the page
</div>
<div id=main_content>...</div>
<div id=footer>
Always display on the bottom
</div>
See A Better Fixed Positioning for Internet Explorer 6
#header { position: fixed; }
#footer { position: fixed; }
But please don't use this. Your users will hate you and leave the site.
#header{
left:0;
top:0;
height:100px;
width:100%;
position:fixed;
z-index:2;
background:grey;
}
#main_content{
margin-top:100px;
margin-bottom:100px;
height:1000px;
}
#footer{
bottom:0;
left:0;
height:100px;
width:100%;
position:fixed;
z-index:2;
background:grey;
}
Related
Let's see if I can explain this correctly. I want a header, always visible AND content AND a footer that is hidden behind the content, that becomes visible when scrolled to the footer. Here's what I have so far...
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height:25vh;
width:100%;
background-color:red;
position:fixed;
top:0;
}
#content {
height:120vh;
width:100%;
background-color:green;
position:relative;
}
#bottom {
height:35vh;
width:100%;
background-color:blue;
position:fixed;
bottom:0;
}
<div id="container">
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
</div>
</div>
What this code currently does: Header is hidden behind content and footer is always visible overlapping content.
Here is the current test page... http://next-factor.com/test-layout.php
Much help is greatly appreciated. Thank You!
give a z-index in #top
#top {
background-color: red;
height: 25vh;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
it will make header visible.
and remove position:fixed from #bottom
#bottom {
background-color: blue;
bottom: 0;
height: 35vh;
width: 100%;
}
hope this will solve your problem
here is the working example http://jsfiddle.net/a3ru9d4d/
in this example I have added padding top in the container so that content inside the container will not hide behind the header.
I think you want something like this:-
*{margin:0;padding:0}
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height:25vh;
width:100%;
background-color:red;
position:fixed;
top:0;
z-index: 1;
}
#content {
height:120vh;
width:100%;
background-color:green;
position:relative;
}
#bottom {
height:35vh;
width:100%;
position:relative;
z-index:-2;
background-color:#31353a;
}
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
Footer
</div>
</div>
I hope it will helps you.
Take a look at this. I've introduced two new CSS definitions that achieve what I think you want.
https://jsfiddle.net/b8my8h5j/
I added z-index definitions. The higher the index, the higher it is in a non-static positioning stack. the content header has 30, so it appears above 20 for the content, but the footer has 10, so t's always at the back.
I added a margin-bottom to the content so that there's space for you to scroll down and have the footer be completely visible.
Update:
https://jsfiddle.net/b8my8h5j/1/
Also cleared padding/margin on the body and html tags so that the blocks fit together snugly.
Added a margin-top to the content so that the top of the green box is visible.
I think this produces what you want: z-indexes on all three, and making room at the bottom of content for the footer to show completely when you scroll to the end of the page
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height: 25vh;
width: 100%;
background-color: red;
position: fixed;
top: 0;
z-index: 3;
}
#content {
height: 120vh;
width: 100%;
background-color: green;
position: relative;
margin-bottom: 33vh;
z-index: 2;
}
#bottom {
height: 35vh;
width: 100%;
background-color: blue;
position: fixed;
bottom: 0;
z-index: 1;
}
<div id="container">
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
</div>
</div>
I have tried several things but my sticky header does not work. I've been trying several tutorials I found, but none worked. I have also looked at different post on stackoverflow but none described my problem.
Here's my HTML:
<div id='container'>
<div id='header>blabla</div>
<div id='actualpage'>bblablabal</div>
<div id='footer'>blablafooterblabla</div>
</div>
And here's the css:
html, body {
padding: 0;
margin: 0;
height: 100%;
}
#container{
background-color:white;
width:100%;
min-height: 100%;
height:100%;
}
#actualpage{
width:750px;
margin-left:auto;
margin-right:auto;
padding-bottom: 20px;
}
#footer{
margin-top:-20px;
clear:both;
height:20px;
background-color:#A6CE39;
padding-top:6px;
padding-bottom:6px;
min-width:100%;
bottom:0;
}
Thank you for your help!
You can add position: fixed or position:absolute (if you don't want the footer stick to bottom while scrolling) to your #footer:
#footer{
margin-top:-20px;
clear:both;
height:20px;
background-color:#A6CE39;
padding-top:6px;
padding-bottom:6px;
min-width:100%;
bottom:0;
position: fixed;
}
add position:absolute; to your #footer
and <div id='header> should be <div id='header'>
If you are referring to your footer, you may add position: absolute to your #footer
Fiddle
#footer {
margin-top:-20px;
clear:both;
height:20px;
background-color:#A6CE39;
padding-top:6px;
padding-bottom:6px;
min-width:100%;
bottom:0;
position: absolute;
}
#container{
background-color: yellow;
width:100%;
min-height: 100%;
}
#actualpage{
width:750px;
margin-left:auto;
margin-right:auto;
padding-bottom: 20px;
}
#footer{
margin-top:-32px;
clear:both;
height:20px;
background-color:#A6CE39;
padding-top:6px;
padding-bottom:6px;
min-width:100%;
}
<div id='container'>
<div id='header'>blabla</div>
<div id='actualpage'>bblablabal</div>
</div>
<div id='footer'>blablafooterblabla</div>
You need the footer outside of the container div.
Also, the bottom: 0; attribute was unnecessary and the negative margin for the footer needed to include the padding, which adds to the computed height
** also, add the closing "'" to id='header
tl;dr
See working CodePen: http://cdpn.io/KwzuA
or use Flexbox - see demo: http://codepen.io/astrotim/pen/PwYQOJ/right/?editors=010
Explanation
Using position for a sticky footer is typically not a good idea, as it removes the element from the document flow and can have undesired results of the footer overlapping the content when scrolling.
A tried and trusted method is to add a "push" div inside the wrapper div and then have the footer div below, outside the wrapper. Like this:
<div id="wrapper">
<header>
<h1>Header</h1>
</header>
<div id="body">
<p>Lorem ipsum...</p>
</div><!--#body-->
<div class="push"></div>
</div><!--#wrapper-->
<footer>
<p>Footer</p>
</footer>
For the CSS, you will need to set html, body and #wrapper with height: 100%. You then set a fixed height to your footer and apply the same height to #push. Then you offset the body with a negative margin-bottom. The #wrapper needs a few other properties, like so:
html, body {
height: 100%;
}
body {
overflow-y: scroll;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -160px;
}
.push, footer {
height: 160px;
}
footer {
/* remember the box model: padding+height */
padding-top: 15px;
height: 145px;
}
The footer will now flow properly when the content of the page extends below the fold, and will be sticky when the content does not.
** Use Flexbox **
The modern approach to this is using Flexbox. See: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
I used the Flexbox technique on a recent project
My Objective: To have a home page, that has a fixed, static footer. The easiest way to explain this is looking at this website, http://www.foxtie.com/. I'm trying to do something like what they have done with the fox, sticking with the footer, only, I'm wanting the entire footer to not ever move from the bottom of the actual screen.
My Code: I've changed, and unchanged, and re-changed it all. So I may be 20 steps farther than I was an hour ago. Here is what I have. (Bear with me, first post here, and I'm very rusty on the html/css).
Any help is appreciated.
The HTML:
<html>
<body>
<div id="container">
<div id="nav"></div>
<div id="content"></div>
<div id="footer">
<div id="imginthefooter"></div>
</div>
</div>
</body>
</html>
The CSS:
body {
height: 100%;
margin: 0px;
}
html {
background-color: #999;
margin: 0px;
height: 100%;
}
#container {
min-height: 100%;
background-color: #666;
position: relative;
}
#content {
overflow: auto;
background-color:#333;
}
#footer {
background-color:#000;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height:100px;
overflow: hidden;
}
#imginthefooter {
background: url(Images/Elk.png);
width:100px;
height:300px;
z-index:300;
bottom: 0px;
top: -108px;
right: -150px;
position: relative;
}
The link that Mr. Alien provided in his comment is for sticky footers. This is useful if you want the footer to appear at the bottom of the screen regardless of the amount of content on the page. What I think that you actually want is for the footer to always appear at the bottom of the page. Meaning that if you scroll down, the footer stays in place. If this is the case, you want the following code:
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
width:100%;
height:100px;
}
The fixed positioning will place the footer at the bottom of the screen permanently. To add a fixed image within the footer, you will need both a relative div and absolute div. The following code is will get you what you want.
<div id="footer">
<div id="footerContainer">
<div id="imginthefooter"></div>
. . . Any additional footer elements go here . . .
</div>
</div>
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
width:100%;
height:100px;
}
#footerContainer {
position:relative;
width:100%;
height:100px;
}
#imginthefooter {
background: url(Images/Elk.png) no-repeat;
width:100px;
height:300px;
top: -108px; /* Position element */
right: 150px; /* Position element */
position: absolute;
}
The relative container within the fixed element will allow you to position the elk image relative to that container.
I'm trying to make fixed 100% but with a little frame around.
I just cant get it right, the frame would appear EITHER top/ bottom, or left/ right, but not from both sides...
Here's what I've got so far:
div.all_reviews{
background: url(../design/trans-gr.png);
position:fixed;
width:100%;
height:100%;
z-index:12500;
padding:15px;
}
div.wrap1{
width:100%;
height:100%;
background-color:#00AEEF;
}
EDIT:1 ALLRIGHT THEN, This is what I've gotten to so far:
http://jsfiddle.net/Hm7Mw/
div.all_reviews{
background: url(../design/trans-gr.png);
position:fixed;
width:100%;
height:100%;
z-index:12500;
overflow:auto;
}
div.wrap1{
display: block;
position:absolute;
height:auto;
width:100%;
min-width:962px;
bottom:6px;
top:6px;
left:0px;
right:0px;
}
div.wrap2{
margin:0px auto;
max-width:960px;
height:100%;
position:relative;
overflow:visible;
}
div.wrap3{
overflow:hidden;
height:auto;
min-height:100%;
width:100%;
position:absolute;
background-color: #FFF;
}
Again, it works perfectly with scrolling - ie,. I've made it scroll the whole thing, rather than what's inside the wraps.
However if I scroll it down, the padding at the bottom vanishes for some reason.
if I put overflow auto to the inner containers instead, then it would sort of 'fix' it, but they would have very ugly scrollbars in the middle of the screen- which I don't want.
HTML:
<div class="all_reviews">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
(BLA)
</div>
</div>
</div>
</div>
</div>
You need something like this:
.onTopOfAll {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1;
/* Something else for style */
}
.onTopOfTop {
bottom: 15px;
left: 15px;
position: fixed;
right: 15px;
top: 15px;
z-index: 2;
/* Something else for style */
}
<div class="all_reviews">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
/8Content/8
</div>
</div>
</div>
</div>
all_reviews{
background: url(../design/trans-gr.png);
position:fixed;
width:100%;
height:100%;
z-index:12500;
display:none;
}
div.wrap1{
display: block;
position:absolute;
height:auto;
width:100%;
bottom:25px;
top:5px;
left:-10px;
right:0px;
}
div.wrap2{
margin:0px auto;
width:100%;
max-width:940px;
min-height:100%;
position:relative;
}
div.wrap3{
overflow:auto;
height:100%;
width:100%;
position:absolute;
background-color: #FFF;
border:5px solid #CCC;
padding:5px;
}
Note to undo display : none with a script, and make the body fixed with overflow:hidden, so it doesn't scroll along the way on the background.
Try height and width of auto of div.all instead of 100%. You may need to add a height of 100% to your body.
your padding is adding some extra width in your div. You gave you div a width of 100% and as you applied the padding now the total width is 15px + 100% + 15px. If you can provide your html as well some idea about what you are going to do then it'll be helpful for rest of us to help you.
thanks.
I'm fiddling with CSS again again...
http://www.kebax.dk/test.php
As you see, the container called map is scrolling independently of the rest of the container. How can I make the whole page scroll when more content is placed in the content?
I have tried using the overflow attribute, but without luck...
EDIT for future references:
body {
background:#000000;
margin:0;
padding:0;
overflow:scroll;
overflow-x:hidden;
}
#container{
position: relative;
height: 100%;
width: 950px;;
background: yellow;
margin-left:auto;
margin-right:auto;
overflow:auto;
}
#map {
position:absolute;
top:80px;
bottom:0;
left:0;
right:0;
background:#fff;
overflow:auto;
overflow-x:hidden;
}
#header {
height:80px;
width:900px;
background:#333;
margin:0;
padding:0;
}
#header h1 {
color:#fff;
margin:0;
padding:0;
}
#leftgradient {
width:50px;
height:80px;
float:left;
background:#096;
background: -webkit-gradient(linear, left top, right top, from(#000000), to(#333333));
}
#rightgradient {
width:50px;
height:80px;
float:right;
background:#096;
background: -webkit-gradient(linear, left top, right top, from(#333333), to(#000000));
}
#toppanel {
background:#179AE8;
width:950px;
height:50px;
}
#leftpanel {
background:#179AE8;
width:100px;
height:250px;
float:left;
}
#content {
background:#099;
width:850px;
margin-left:100px;
}
<div id="container">
<div id="leftgradient"></div>
<div id="rightgradient"></div>
<div id="header">
<header>
<h1>
Heading
</h1>
</header>
</div>
<div id="map">
<div id="toppanel">
top
</div>
<div id="leftpanel">
lefty
</div>
<div id="content">
Lots of text!!
</div>
</div>
</div>
If I understand correctly, you just need to remove a boatload of CSS declarations:
On body, remove: overflow: hidden.
On #container, remove: height: 100%, overflow: auto, position: relative.
On #map, remove:
position: absolute, left: 0, bottom: 0, right: 0, top: 80px
overflow-x: hidden, overflow-y: auto.
Now you can scroll the page (tested in Firefox only).
Removing all that stuff possibly broke some certain functionality on your page. Let me know if there is anything, and we can see about finding another way to add back in this missing functionality.
To fix the issue in the comments, add:
html, body { height: 100% }
On #container, add min-height: 100%.
Now, you can see the yellow background poking out on #container. A way to fix this would be to change that yellow to white, and then use a background image exactly like this:
(save and use it)
On #container:
background: #fff url(http://i.stack.imgur.com/q1Sp1.png) repeat-y
You also need to remove the white background-color from #map.
overflow: scroll; :) give that a whirl