Content with 100% height in bootstrap container

Question

I need help with css, html & bootstrap.

How I can get effects like this: Layout

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

To center I use:

<div class="container">

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

You need to do this: stackoverflow.com/questions/11677886/… I have put an answer below — 97ldave
– 97ldave, Commented Jan 29, 2013 at 12:01

Jacobious · Accepted Answer · 2016-12-31 18:13:57Z

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

Community · Accepted Answer · 2017-05-23 10:30:34Z

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%; }

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Jan 29, 2013 at 12:03

97ldave

5,2594 gold badges28 silver badges39 bronze badges

1 Comment

atubitu Over a year ago

Ok. I tried everything. I put final result below: [jsfiddle.net/atubitu/eqmLW/8/][1] [1]: jsfiddle.net/atubitu/eqmLW/8 Unfortunately: 1. Footer is "pseudo-sticky" and is not centered. 2. Text in content stick out outside div.

Collectives™ on Stack Overflow

Content with 100% height in bootstrap container

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related