Geek asks and answers

CSS - Sticky Footer

There seem to be a lot of problems with this, but none of them seem to work for me ...

I created this little jsfiddle to show you: jsfiddle footer

And CSS:

.footer {
     width:798px;
     border-top: 2px solid #2E181A;
     clear: both;
     padding: 5px 0 0 0;
     background-color: inherit;
     text-align: center;
     bottom:0;
     background-color: #E6D9BD;
     position:relative;
     height: 30px;
     margin: -30px auto 2px auto;
     z-index:30;
 }

 .container {
     width: 788px;
     margin: 0px auto 0px auto;
     padding: 0px 0px 30px 0px;
     border:5px solid #2E181A;
     background-color: #E6D9BD;
     min-height: 100%;
     position:relative;
     content: " "; /* 1 */
     display: table; /* 2 */
 }

 .contentleft {
     background-color: inherit;
     margin:5px 10px 10px 10px;
     padding:10px 5px 30px 5px;
     float:left;
     overflow: hidden;
     width: 300px;
     display:block;
 }

 .contentright {
     background-color: inherit;
     margin:5px 0px 10px 10px;
     border:0px solid #2E181A;
     padding:10px 5px 30px 5px;
     float:left;
     overflow: hidden;
     width: 420px;
     display:block;
 }

I set the upper border to div.footer, and this should be a visible and small space between the border and div.container.

Hope you take a quick look at the code and see what I'm doing wrong!

+4
source share
5 answers

Modern Clean Sticky Footer CSS by James Dean

HTML

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

CSS

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

Demo here

+4
source

I'm not sure if this is what you wanted? http://jsfiddle.net/2jn3J/19/

50 , . , div - 30 , 20px.

.footer-container {
    background-color:white;
    height:50px;
    width:100%;
    position:fixed;
    bottom:0;
    z-index:30;
    clear: both;
}

.footer {
    border-top: 2px solid #2E181A;
    background-color: inherit;
    text-align: center;
    background-color: #E6D9BD;
    height:30px;
    position:absolute;
    bottom:0;
    width:100%;
}

.container
{
    width: 100%;
    margin: 0px auto 0px auto;
    padding: 0px 0px 30px 0px;
    background-color: #E6D9BD;
    height:2000px;
    position:relative;
        content: " "; /* 1 */
    display: table; /* 2 */
}
.contentleft
{

    background-color: inherit;
    margin:5px 10px 10px 10px;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: hidden;
    width: 300px;
        display:block;
}
.contentright
{

    background-color: inherit;
    margin:5px 0px 10px 10px;
    border:0px solid #2E181A;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: hidden;
    width: 420px;
    display:block;
}
+3

, http://www.cssstickyfooter.com/html-code.html, html, body { height: 100%; } "".

http://jsfiddle.net/2jn3J/22/

, div min-height: 100%; min-height: 100%; .container.

http://jsfiddle.net/2jn3J/28/

CSS

html, body { height: 100%; }
.wrap { min-height: 100%; }
.footer {
    width:798px;
    border-top: 2px solid #2E181A;
    clear: both;
    padding: 5px 0 0 0;
    background-color: inherit;
    text-align: center;
    bottom:0;
    background-color: #E6D9BD;
    position:relative;
    height: 30px;
    margin: -37px auto 0 auto;
    z-index:30;
}

.container {
    width: 788px;
    margin: 0px auto 0px auto;
    padding: 0px 0px 30px 0px;
    border:5px solid #2E181A;
    background-color: #E6D9BD;
    position:relative;
    content: " "; /* 1 */
    display: table; /* 2 */
    overflow: auto;
}

.contentleft {
    background-color: inherit;
    margin:5px 10px 10px 10px;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: auto;
    width: 300px;
    display:block;
}
.contentright {
    background-color: inherit;
    margin:5px 0px 10px 10px;
    border:0px solid #2E181A;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: hidden;
    width: 420px;
    display:block;
}

HTML:

<div class="wrap">
<div class="container">

<div class="contentleft">Content in the left</div>
<div class="contentright">Content in the right</div>

</div>
</div>

<div class="footer">Sticky footer</div>
+1
source

Flexbox makes life easier.

.FlexContainer {
  display: flex;
  flex-direction: column;
}

.Main-Content {
  flex: 1; 
  // This ensures, all extra space is stretched by this class. Remaining will stretch to own height
}

/* Only to distinguish. No need to give body height  */

header {
background-color: red;
}
main {
background-color: green;
}
footer {
background-color: blue;
}

body {
height: 300px;
}
<body class="FlexContainer">
  <header>HEADER</header>
  <main class="Main-Content">
    This is main section
  </main>
  <footer>FOOOOTERRR</footer>
</body>
Run codeHide result
+1
source

This is a table simulation using css. The header and footer are 100 pixels high, and the div container occupies the entire screen space between

CSS

#frame{
   display: table;
   height: 100%
   width: 100%;
}

#header{
   display: table-row;
   height: 100px;
   background-color: red;
}

#container{
   display: table-row;
}

#footer{
   display: table-row;
   height: 100px;
   background-color: black;
}

HTML:

<div id="frame">
    <div id="header"></div>
    <div id="container"></div>
    <div id="footer"></div>
</div>

JSFiddle (I added some additional styles to the body because the violin is in the iframe, but in normal browser mode you won’t need that).

0
source

More articles:


All Articles