Set Bottom Navbar Menu On The Bottom Of The Page Without A Position:fixed (bootstrap, Css3)

I'd like to change my css so that the page has the bottom menu stay there (like fixed) but without the position:fixed. Why? Indeed, using Boostrap 3, I am using navbar-fixed-bottom

Solution 1:

I will give you an idea, about how it could be solved.

Use 2 divs, one after the other. The 1st div will contain your image, or whatever you want to put in the main content area. Its height is 90%, of course you can change or modify that. The second div is your menubar, the height is 10%, modify it as per your needs. Notice the overflow:auto in the .image_content class, it will contain your main contents, regardless of its length and keep the menubar at the bottom.

<style>
.main_wrapper {
    height:100%;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:9999;
}
.image_content {
    height:90%;
    background:red;
    overflow:auto;
}
.bottom_menu {
    height:10%;
    background:blue;
}
</style>

<div class="main_wrapper">
    <div class="image_content">
        Your main content here
    </div>
    <div class="bottom_menu">
        Menu here
    </div>
</div>

Of course, remove the red and blue colors from the divs, they are just for the testing.

Added the following image to better explain what is going on in my code -