title: Set bottom navbar menu on the bottom of the page without a position:fixed (bootstrap, css3)
body: <p>I'd like to change my css so that the page has the bottom menu stay there (like fixed) but without the position:fixed.</p>
  
  <p>Why?</p>
  
  <p>Indeed, using Boostrap 3, I am using navbar-fixed-bottom .</p>
  
  <p>BUT position:fixed <a href="http://caniuse.com/#feat=css-fixed" rel="nofollow noreferrer">is not supported at all</a> on Opera Mini which accounts for 10% almost of mobile browsers (see <a href="http://www.netmarketshare.com/browser-market-share.aspx?qprid=1&amp;qpcustomb=1" rel="nofollow noreferrer">here</a>).</p>
  
  <p><strong>how can I create this without position:fixed ?</strong></p>
  
  <p>3 constraints:</p>
  
  <ul>
  <li><p>I never want any scroll: it means if the viewport gets smaller(no matter the size of the viewport: big, small, desktop, tablet...), the menu and image will just get smaller and never any horizontal nor vertical scrollbar. </p></li>
  <li><p>and I want the menu to stay below the image (the quality of the image, distorted or not, is not my point in this question).</p></li>
  <li><p>i want only html and css: no javascript nor jquery. thanks</p></li>
  </ul>
  
  <p>Here is an example of what I would like to do:</p>
  
  <p><img src="https://i.stack.imgur.com/7d2hN.jpg" alt="enter image description here"></p>
  
  <p>Here is my current code using fixed position:</p>
  
  <pre><code>&lt;div&gt;
      &lt;nav role="navigation" class="navbar navbar-default navbar-fixed-bottom"&gt; 
          &lt;div class="container"&gt;
              &lt;!-- Title --&gt;
              &lt;div class="navbar-bottom pull-left"&gt;
                &lt;a href="/" class="navbar-brand"&gt;BIGGA&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;!-- The non-Collapsing items on navbar-LEFT  --&gt;
              &lt;div class="collapse navbar-collapse navbar-left"&gt;
                  &lt;!-- pull-right keeps the drop-down in line --&gt;
                  &lt;ul class="nav navbar-nav pull-right"&gt;
                    &lt;li&gt;
                      &lt;a href="/news"&gt;News&lt;/a&gt; 
                    &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
              &lt;!-- 'Sticky' (non-collapsing) right-side menu item(s) --&gt;
              &lt;div class="navbar-bottom pull-right"&gt;
                  &lt;ul class="nav pull-left"&gt;
                      &lt;!-- This works well for static text, like a username --&gt;
                      &lt;li class="navbar-text pull-left"&gt;User Name&lt;/li&gt;
                      &lt;!-- Add any additional bootstrap header items. This is a drop-down from an icon --&gt;
                      &lt;li class="dropup pull-right"&gt; &lt;a href="#" data-toggle="dropdown" style="color:#777; margin-top: 5px;" class="dropdow-toggle"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt;&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
  
                          &lt;ul class="dropdown-menu"&gt;
                              &lt;li&gt; &lt;a href="/users/id" title="Profile"&gt;Profile&lt;/a&gt;
  
                              &lt;/li&gt;
                              &lt;li&gt; &lt;a href="/logout" title="Logout"&gt;Logout &lt;/a&gt;
  
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;!-- Required bootstrap placeholder for the collapsed menu --&gt;
                  &lt;button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"&gt;&lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;
  
                  &lt;/button&gt;
              &lt;/div&gt;                     
  
  
              &lt;!-- Additional navbar items on the LEFT of the PULL-RIGHT stuff above --&gt;
              &lt;div class="collapse navbar-collapse navbar-right"&gt;
                  &lt;!-- pull-right keeps the drop-down in line --&gt;
                  &lt;ul class="nav navbar-nav pull-right"&gt;
                      &lt;li&gt;&lt;a href="/locator"&gt;Locator&lt;/a&gt;
  
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="/extras"&gt;Extras&lt;/a&gt;
  
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>