seniorpreacher
seniorpreacher

Reputation: 666

How to make real dynamic footer?

Over the years I've tried lot of different techniques, but I still can't find a way, where I could create a footer, that is dynamically changes height, depending on the content and if the site have less content, the footer goes down to the bottom of the page.

I've tried to play with the ::after pseudo element:

footer::after {
    content: '';
    position: absolute;
    background: red; //just test
    width: 100%;
    height: 99px;
}

And I found a way, where you can do this to look nice, but you need to set the height of the footer. But if you want a real responsive UI, you can not set the height of the footer :)

I hope anyone knows the secret, how to create a dynamic footer.

Upvotes: 4

Views: 18130

Answers (3)

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

This can easily be done with CSS2.1 (but not in IE7-). The main trick is the following:

.container {
    display: table;
    height: 100%;
    width: 100% /* mimics `display: block` */
}
.footer {
    display: table-footer-group;
}
/* to add padding use the below or wrapper/inner wrapping element combo. */
.footer:before, .footer:after {
    padding: 1em;
    content: '';
}

In modern browsers, it can also be done with FlexBox, which is probably more appropriate theoretically, but less supported yet.

Upvotes: 2

Chris Hasiński
Chris Hasiński

Reputation: 3085

What you want is sticky footer with fluid height.

In older browsers you'll need some JavaScript.

In modern browser you can use css table display types:

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        html, body {
             height: 100%;
             margin: 0pt;
        }
        .Frame {
             display: table;
             height: 100%;
             width: 100%;
        }
        .Row {
             display: table-row;
             height: 1px;
        }
        .Row.Expand {
             height: auto;
        }
    </style>
</head>
<body class="Frame">
    <header class="Row"><h1>Catchy header</h1></header>
    <section class="Row Expand"><h2>Awesome content</h2></section>
    <footer class="Row"><h3>Sticky footer</h3></footer>
</body>
</html>

I took this example from:

http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/

EDIT: Now I see you want to expand the footer, not the content. I'm leaving the original for bypassers with sticky footer question as it is more common version.

Try this version instead:

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        html, body {
             height: 100%;
             margin: 0pt;
        }
        .Frame {
             display: table;
             height: 100%;
             width: 100%;
        }
        .Row {
             display: table-row;
             height: 1px;
        }
        .Row.Expand {
             height: auto;
        }
    </style>
</head>
<body class="Frame">
    <header class="Row"><h1>Catchy header</h1></header>

    <!-- these two line differ from the previous example -->
    <section class="Row"><h2>Awesome content</h2></section> 
    <footer class="Row Expand"><h3>Sticky footer</h3></footer>

</body>
</html>

Upvotes: 8

Airen
Airen

Reputation: 2169

It is sticky footer, please try this:

HTML

<div id="container">
   <div id="header">Header Section</div>
   <div id="page" class="clearfix">
      <div id="left">Left Sidebar</div>
      <div id="content">Main content</div>
      <div id="right">Right sidebar</div>
   </div>
   <div id="footer">Footer Section</div>
</div>

CSS

/*sticky footer style*/
html,body {
  margin: 0;
  padding:0;
  height: 100%;
}
#container {
  min-height:100%;
  height: auto !important;
  height: 100%; /*for ie6*/
  position: relative;
}
#header {
  background: #ff0;
  padding: 10px;
}
#page {
  width: 960px;
  margin: 0 auto;
  padding-bottom: 60px;/* equal to the footer's height*/
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;/*The footer' height*/
  background: #6cf;
  clear:both;
}
/*=======主体内容部分=======*/
#left {
  width: 220px;
  float: left;
  margin-right: 20px;
  background: lime;
}
#content {
  background: orange;
  float: left;
  width: 480px;
  margin-right: 20px;
}
#right{
  background: green;
  float: right;
  width: 220px;
}

Pleas view the demo. Other methods, you can click here.

And you can use the CSS3 flexbox Module, Like this:

HTML

  <header class="Row"><h1>Catchy header</h1></header>
  <section class="Row Expand"><h2>Awesome content</h2></section>
  <footer class="Row"><h3>Sticky footer</h3></footer>

CSS

header,section,footer {
  display: block;
}
html,body{
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  width: 100%;
  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -moz-box-orient: vertical;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
section {
  -moz-box-flex:1;
  -webkit-box-flex:1;
  -ms-flex:1;
  -webkit-flex:1;
  flex:1;

  background: hsla(250,20%,30%,0.9);
}
header {
  background: orange;
}
footer {
  background: green;
}

Please view the demo. About the css3 flexbox module.

Upvotes: -2

Related Questions