CODEWITHSUNDEEP
csstoolbarfooterfixed
Ben Scmidth
Ben Scmidth

Reputation: 1335

Stick the toolbar to bottom

My code 

.bid-toolbar {
    background:#FFCD2F !important;
    height:70px !important;
    position: fixed;
    bottom: 0;

I want to make the yellow toolbar stick to the bottom. I have tried a few times to make this toolbar to the bottom, but whenever I make it 

fixed

, it goes up as I scroll the page down as you can see in the image below.

Upvotes: 0

Views: 3412

Answers (5)

Terabyte
Terabyte

Reputation: 455

You can use jQuery to keep the bid toolbar bottom try the this code and note I used an ID #bid_toolBar you can change it to class if you want to.

  $(document).ready( function() { 

       var bid_toolBarHeight = 0,
           bid_toolBarTop = 0,
           $bid_toolBar = $("#bid_toolBar");

       positionbid_toolBar();

       function positionbid_toolBar() {

                bid_toolBarHeight = $bid_toolBar.height();
                bid_toolBarTop = ($(window).scrollTop()+$(window).height()-bid_toolBarHeight)+"px";

               if ( ($(document.body).height()+bid_toolBarHeight) < $(window).height()) {
                   $bid_toolBar.css({
                        position: "absolute"
                   }).animate({
                        top: bid_toolBarTop
                   })
               } else {
                   $bid_toolBar.css({
                        position: "static"
                   })
               }

       }

       $(window)
               .scroll(positionbid_toolBar)
               .resize(positionbid_toolBar)

});

Upvotes: 1

Torben
Torben

Reputation: 6837

Using position: fixed often causes problems in mobile browsers. You can use display:flex in combination with overflow:auto to get a fixed footer without using fixed postioning:

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        html, body {
             height: 100%;
             margin: 0pt;
        }
        .Frame {
             display: flex;
             flex-direction: column;
             height: 100%;
             width: 100%;
        }
        .Row {
          flex: 0 0 auto;
        }
        .Row.Expand {
          overflow: auto;
          flex: 1 1 auto;
        }
    </style>
</head>
<body>
   <div class="Frame">
       <div class="Row Expand"><h2>Awesome content</h2></div>
       <div class="Row"><h3>Sticky footer</h3></div>
   </div>
</body>
</html>

A working example: https://jsfiddle.net/9L2reymy/2/

This is the original answer, which hides the footer if the content is bigger than the screen height:

I wrote an article in my blog about fixed footers and implemented them with display:table instead. Here is the relevant code in a simple example:

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        html, body {
             height: 100%;
             margin: 0pt;
        }
        .Frame {
             display: table;
             height: 100%;
             width: 100%;
        }
        .Row {
             display: table-row;
             height: 1px;
        }
        .Row.Expand {
             height: auto;
        }
    </style>
</head>
<body>
   <div class="Frame">
       <div class="Row Expand"><h2>Awesome content</h2></div>
       <div class="Row"><h3>Sticky footer</h3></div>
   </div>
</body>
</html>

Upvotes: 2

divz
divz

Reputation: 11

You can try adding:

-webkit-transform: translateZ(0);

Or this was actually just the device/browser issues.

Upvotes: 1

Sinju Angajan
Sinju Angajan

Reputation: 893

position:absoulute; left:0px; bottom:0px; z-index:999;

Upvotes: 1

Ujjwal Kumar Gupta
Ujjwal Kumar Gupta

Reputation: 2376

Instead of position:fixed make it absolute property of position like

position:absolute;

Upvotes: 1

Related Questions