100% height div with bootstrap 3

Question

I want to make a full height website but it seem twitter make issue with body min-height 100%

here my css :

html{
    height:100%;
}
body{
    min-height:100%
}
#main{
    min-height:100%;
}

and here my HTML :

<html>
    <head>
        ...
    </head>
    <body>
        <div id="main" class="container">
            ...
        </div>
    </body>
</html>

I want my #main div always same height that browser if content is smaller than browser but I want my div will highter than browser if my content is bigger.

With my code, #main div always take height of my content and don't adjust to my browser size if i have a small content.

Why ?!

Have you tried. min-height: 100vh; vh stands for windows height — Carsten Løvbo Andersen, Mar 03 '14 at 11:09
http://stackoverflow.com/questions/17555682/height-100-or-min-height-100-for-html-and-body-elements — Mr. Alien, Mar 03 '14 at 11:09

score 0 · Answer 1 · answered Mar 03 '14 at 11:10

0

Try giving this CSS.

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

answered Mar 03 '14 at 11:10

Tushar

4,280
5
24
39

score 0 · Answer 2 · answered Mar 03 '14 at 11:17

0

You need to add some extra css to your code.

#main {
min-height:100%;
}

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

i hope this is what you're looking for if, not try explain me what happens ;)!

answered Mar 03 '14 at 11:17

user3261123

79
2
7

If I fix my body height to 100%, my content overflows of my body when content is long. I want my body have at least the same height that browser but un unlimited height if my content is to long – Fabien Mar 03 '14 at 14:35

score 0 · Answer 3 · answered Mar 03 '14 at 11:19

0

Just add below CSS and you will be done :

body, html {
  padding:0px;
  margin:0px;
  height: 100%;
  min-height: 100%;
}

answered Mar 03 '14 at 11:19

Sushil Kandola

870
2
9
22

100% height div with bootstrap 3

3 Answers3

Linked