•  01-07-2022
  •  | 
  •  

Domanda

I want my footer to stick to the bottom of the page, so when the page is smaller than the screen, the footer should be on the bottom anyways. But it should not conflict with margin in the css file. So it should not mess up the page when I use margin for some stuff.

È stato utile?

Soluzione

You just need to create wrapper div and get out footer from there. Then make margin-bottom in this wrapper equal footer height and create some push div - it will be place for footer. Look at this: http://jsfiddle.net/PXYSk/4/

Altri suggerimenti

Try using fixed position and the css3 calc() function:

JSFiddle

Just set the footer to position: absolute and bottom: 0.

This is a good example how to create sticky footer, but you need fixed height for footer block:

CSS:

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
}
.footer, .push {
height: 50px;
}

HTML:

<html>
<head>
    <link rel="stylesheet" href="layout.css" ... />
</head>
<body>
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
        <p>Copyright (c) 2008</p>
    </div>
</body>

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top