2

I need help with css, html & bootstrap.

How I can get effects like this: Layout

  1. Header = Boostrap navbar (50px height)
  2. Container = gray background on all site and center content
  3. Left column = menu - width 220px
  4. Right column = content with white background and 100% height
  5. Footer = sticky footer (height: 50px)

To center I use:

<div class="container">

but I have problem with 100% height content and sticky footer.

santosh krishna
  • 27
  • 4
atubitu
  • 31
  • 2
  • You need to do this: http://stackoverflow.com/questions/11677886/twitter-bootstrap-div-in-container-with-100-height I have put an answer below – 97ldave Jan 29 '13 at 12:01

2 Answers2

3

You should put your css and html here so that anybody can suggest you easily.

For the sticky footer you need to set its position as absolute and set the main div's position as relative.

like : 

html, body {
    height: 100%;
    min-height: 100%;
}

.container { 
    min-height: 100%;
    height: 100%;
    position: relative;
}

.footer
{
    height: 20px; //according to your requirement
    position: absolute;
    bottom: 0px;
}
Jacobious
  • 3
  • 5
Finisher001
  • 455
  • 1
  • 5
  • 18
1

You need to do something like this: Twitter Bootstrap: div in container with 100% height

html, body {
    height: 100%;
}

.container { 
    min-height: 100%;
    height: 100%;
}
Community
  • 1
  • 1
97ldave
  • 5,249
  • 4
  • 25
  • 39
  • Ok. I tried everything. I put final result below: [http://jsfiddle.net/atubitu/eqmLW/8/][1] [1]: http://jsfiddle.net/atubitu/eqmLW/8/ Unfortunately: 1. Footer is "pseudo-sticky" and is not centered. 2. Text in content stick out outside div. – atubitu Jan 30 '13 at 18:00