how to get fixed header with css?


Tags: html,css

Problem :

this is my code and when the page has more content when we scroll the header moves too then i tried making the position of the header fixed but then the footer doesn't stick to bottom :/

html,body
{
    margin: 0px;
    height:100%;
    min-height: 100%;
    top: 0;
    width: 100%;
    position: absolute;
}
header
{
    width: 100%;
    background-color: #000000;
    height: 8%;
    min-height: 8%;
}
#container
{
    min-height: 85%;
    margin-top: 0.5%;
}
footer
{
    bottom: 0;
    background-color: #000000;
    width: 100%;
    height: 6%;
    min-height: 6%;
    position: relative;

}


Solution :

Set position:fixed to the footter

header
{
    width: 100%;
    background-color: #000000;
    height: 8%;
    min-height: 8%;
    z-index:1000;
    position:fixed;
    /*.........^........*/  
    top:0;
}
footer{
    bottom: 0;
    background-color: #000000;
    z-index:1000;
    width: 100%;
    height: 6%;
    min-height: 6%;
    position:fixed;
    /*.........^........*/     
}

Fiddle Demo


    CSS Howto..

    how to configure .htc files to work on nginx

    How can I write a complex fraction using HTML/CSS/jQuery?

    How to make Google Preview Button display in a CSS pop-up?

    using css, how to position image so when resizing window, image will not move

    How do I optimize a very loooong page with TONS of images on it?

    How to load self hosted font files if the GoogleFont service is unavailable?

    JQuery JQGrid - how to CSS right/left align without touching the grid lines?

    How to link external CSS stylesheets on a Chromebook

    How to display .entry-content CSS on Wordpress home page?

    How to display row of images in a repeater control vertically instead of horizontally

    How to set specific css value for javaFX ProgressBar during Runtime?

    How can I take pseudo:after { content: “Value”; } value dynamically in this snippet?

    How to change social network icons colors in fixed menu?

    How do I keep my background image at the bottom of the page?

    How to have an image incorporate in my text ? HTML CSS

    How to put a canvas on an image?

    Changing opacity for div in div - is this possible? How?

    How to Access A To String Function with PHP?

    Meteor: How can I use Spacebars to apply different CSS elements?

    How do I stop css pushing
  • to the right?
  • How to center text from following element under an image

    How add symbol in CSS for element?

    How can I use jQuery to create a csv of all checked checkboxes associated text?

    How can I remove the underline of a linked image in Firefox and Chrome?

    How can I wrap content around a UL CSS Menu so content is seamless?

    How to hide element label by element id in CSS?

    How to style a dynamic html created by PHP

    css float: left clash/collision, how to avoid?

    how to display a list inline using HTML and CSS

    How can I edit adjacent selector to a nested one