Bootstrap 100% height with navbar

Question

This is basically what I want to achieve:

I want the total page to be 100% height, but when

Answer 1

I change a litle your code by adding a container around your side bar and body class:

Here is the RESULT

Css:

body, html, .container-fluid, .sidebar, .body {
    height: 100%;
    min-height: 100%;
}

#container{
    width:100%;
    height:100%;
}


.sidebar{
    background-color: green;
    width:10%;
    float:left;
    height:100%;

}

.body{
    background-color: orange;
    float:left;
    width:90%;
    height:100%;

}

.navbar {
    height: 40px;
    position: relative;
    background-color: yellow;
    width:100%;
}

HTML

    

        navbar
    
    

        

            sidebar
        
        

            body