Creating a web page structure with footer at the bottom and 100% content

Question

I want to design a structure for a web page but I have a problem that I can't sole it. This is what I want:

a web page with 3 parts:

  1-header
  2-content( has 2 parts, a sidebar and a content section)
  3-footer

and I want these characteristics:

  1- if in the content section there is nothing then footer stays at the bottom, if we have content, footer pushes down and stays after my content
  2- my sidebar(exist in the content section) take 100% height of content section and connects to footer

like this:

enter image description here

I build this with this code and it works, but my problem is that if contents of sidebar area gets bigger, sidebar and main content area overlaps footer! I want that in this situation, footer stays after my content.

I use Twitter Bootstrap for my work. I don't want to use methods that are available only in the new browsers. at least IE 9.

this is my code:

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"  href="bootstrap.min.css" />
<link rel="stylesheet"  href="style.css" />
</head>

<body>

    <div class="container-fluid">

        <div class="row header">
            <div>header</div>
        </div>

        <div class="row content">
            <div class="col-lg-2 sidebar">
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
            </div>
            <div class="col-lg-10">content</div>
        </div>

        <div class="row footer">
          <div>footer</div>
          <div>footer</div>
          <div>footer</div>
          <div>footer</div>
          <div>footer</div>
        </div>
</div>

and this is CSS:

body,html{
  height: 100%;
}

.container-fluid {
  height:100%;
 }


 .header{
    background-color: #ccff55;
  }

 .content{
     background-color: #445566;
     height: -webkit-calc(100% - 10%);
  }

  .sidebar{
     background-color: #446655;
     height: 100%;
   }

   .footer{
     background-color: #11ff99;
   }

possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — connexo, May 24 '15 at 17:15
This is an amazing use of the 'calc' property... 100% - 10%. Haha... have you tried 90%? Haha... — Sean Stopnik, May 24 '15 at 17:15
@connexo: no this is not that i want and this is not a duplicate post. that post you mentioned is the half of my question, just set footer to bottom. i want 100% content too — Fcoder, May 24 '15 at 17:21
@SeanStopnik: this is a structure my friend, instead of -webkit-calc(100% - 10%); we can write -webkit-calc(100% - 50px); for example. — Fcoder, May 24 '15 at 17:22
@Fcoder I am very aware of how calc works.... by your example above it appeared that you did not. I was just giving you a bit of friendly sarcasm. — Sean Stopnik, May 24 '15 at 17:24
Why not give your content container a padding-bottom according to your footer's height? Then, apply `position: relative;`to `.content` and you can start using z-index on content and footer to make sure the footer always stays above the content. As a last step, either adjust the height calculation, taking into account the new padding, or apply `box-sizing: border-box;` to `.content`. — connexo, May 24 '15 at 17:26
Please clarify "if we have content, footer pushes down and stays after my content". You want the footer at the bottom of the page or the bottom of the content, whichever is greater? Should the content be allowed to push the footer beyond the page bottom? You're getting many good (but wrong) answers because people aren't clear about what you want. — Yogi, May 24 '15 at 17:28
@Robert: if our content is less and less that screen height, footer should stay at the bottom like a sticky footer, but if we have a lot's of content, our footer should goes down and stay after content. Always footer should be after content — Fcoder, May 24 '15 at 17:30
Your last comment convinces me that this indeed is a duplicate. — connexo, May 24 '15 at 17:31
@connexo - agree. The min-height on the wrapper div is the key as shown in the duplicate you referenced. — Yogi, May 24 '15 at 17:38
@connexo: you'r last answer is just a little bit hard to me to understand. can you edit my code? — Fcoder, May 24 '15 at 17:44
First try to understand and apply the answer that is already available on the duplicate reference question. This might include restructuring your own code. — connexo, May 24 '15 at 17:47
@connexo: my question has 2 parts 1- footer stay at the bottom. 2- my content at least should have 100%-footer of the page. all other questions has only part 1 — Fcoder, May 24 '15 at 17:54
Do not only check the answer itself; the answer references several other links. Creating a sticky footer is an absolute standard problem that has been solved a million times before. — connexo, May 24 '15 at 18:25
Also, please check http://stackoverflow.com/questions/17966140/twitter-bootstrap-3-sticky-footer/20611729#20611729 — connexo, May 24 '15 at 18:29

score 3 · Answer 1 · answered May 24 '15 at 17:38

You can use a js method I wrote that will help you fixing the header at bottom of the page:

<script type="text/javascript">
window.onload = function(event) { resizeDiv(); }
window.onresize = function(event) { resizeDiv(); }
function resizeDiv() {
    vpw = $(window).width(); 
    vph = $(window).height()-54;
    $('#main').css({'height': vph + 'px'});
    $('.container').css({'height': vph + 'px'});    
    $('.sidebar').css({'height': vph + 'px'});  
  }
 </script>

Adapt 54 to the height of your footer. Then if you add to your css:

.container{
    overflow: scroll;
}
.sidebar{
    overflow: scroll;
}

your footer will be always visible on the bottom of the screen. Else, the footer will go further down when the content of the container will be bigger then what is set by js. Don't forget to set in your document.ready function a call to resizeDiv(); to use it when you load the page.

$(document).ready(function(){
    resizeDiv();
});

Using JS you will have no issues on all the browsers and even in old versions.

Николаи Милош · Answer 2 · 2015-05-24T17:30:49.447

Ok, try this. It worked for me. Maybe some fine tuning is needed, but basically this is what you want.

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"  href="bootstrap.min.css" />
<link rel="stylesheet"  href="style.css" />
<style type="text/css">
body,html{
  height: 90%;
  margin:0px;
  padding:0px;
}

.container-fluid {
  min-height:100%;
 }


 .header{
    background-color: #ccff55;
  }

 .content{
     background-color: #445566;
     height: -webkit-calc(100% - 10%);
  }

  .sidebar{
     background-color: #446655;
     height: 100%;
   }

   .footer{
     background-color: #11ff99;
     bottom:0px;
     position:relative; 
     min-width:100%;

   }
</style>
</head>

<body>

    <div class="container-fluid">

        <div class="row header">
            <div>header</div>
        </div>

        <div class="row content">
            <div class="col-lg-2 sidebar">

            </div>
            <div class="col-lg-10">
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
            </div>
        </div>


</div><div class="row footer" >
          <div>footer</div>
          <div>footer</div>
          <div>footer</div>
          <div>footer</div>
          <div>footer</div>
        </div>
</body>
</html>

no its not work and everything overlaps everything. did you test it? — Fcoder, May 24 '15 at 17:45
@Fcoder Yes I did, in fact I have it on another tab. I'll check it again. — Николаи Милош, May 24 '15 at 17:48

score 1 · Answer 3 · answered May 24 '15 at 17:14

It's overlapping because your .content element has a height calculation 10% less than the body height. This allows the footer to creep up, causing the overlap.

Your content will always be where it is now because you have nothing in the CSS to create the page that will make .content and the sidebar sit side-by-side, such as using float and sizing the elements.

score 1 · Answer 4 · answered May 24 '15 at 17:15

1

Try the following:

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
}

answered May 24 '15 at 17:15

Stefan Ch

329
2
7

score 1 · Answer 5 · answered Oct 24 '17 at 05:12

css

#wap {
    background-color: #532485;
    width: 80%;
    height: auto;
    margin: auto;
}
.header {
    background-color: #123456;
    width: 100%;
    height: 60pt;
}
.menu {
    background-color: #154856;
    width: 100%;
    height: 120pt;
}
.left {
    background-color: #154896;
    width: 30%;
    height: 200pt;
    float: left;
}
.center {
    background-color: #897535;
    width: 40%;
    height: 200pt;
    float: left;
}
.right {
    background-color: #154896;
    width: 30%;
    height: 200pt;
    float: left;
}
.footer {
    background-color: #567829;
    width: 100%;
    height: 60pt;
    float: left;
}
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
ul li {
    float: left;
}
ul li ul {
    display: none;
}
ul li:hover ul {
    display: block;
}
ul li a {
    background: #f2f2f2;
    text-decoration: none;
}
ul li a:hover {
    color: #fff;
    background: #128536;
    border-radius: 20px;
}

html

<div id="wap">
    <div class="header">header</div>
    <div class="menu">
        <ul>
            <li>home</li>

            <li>service
                <ul>
                    <li> a</li>
                    <li> b</li>
                </ul>
            </li>

            <li>about</li>
        </ul>
    </div>
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
    <div class="footer">footer</div>

</div>

like this

Click here

Creating a web page structure with footer at the bottom and 100% content

5 Answers5