Twitter Bootstrap Question posted in

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

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;
   }
Tags:

5

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    Try the following:

    .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
}
    Login or Signup to reply.
  4. 0

    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.

    Login or Signup to reply.
  5. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search