棒工具栏底部

我的代码棒工具栏底部

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

我要让黄色工具条粘在底部。我已经尝试了几次，使这个工具栏下方，但每当我让它

fixed

，它上升为我页面向下卷动，你可以在下面的图片中看到。

来源

2016-07-18 Ben Sc

尝试添加！重要的或只是给你的网页链接 –

！对你的意思是重要的位置？ –

添加！重要，没有任何改变... –

而不是position:fixed使它的位置absolute财产一样

position:absolute;

来源

2016-07-18 06:55:27

它仍然是相同的;） –

确定底部：0px不0.ok检查出来，让我知道 –

这仍然是我放0px .. –

使用position: fixed往往会导致移动浏览器的问题。您可以结合使用display:flex与overflow:auto得到一个固定的页脚，而无需使用固定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>

工作的示例：https://jsfiddle.net/9L2reymy/2/

这是原来的答案，隐藏页脚如果内容大于屏幕高度：

我写了an article in my blog about fixed footers并使用而不是。这里是一个简单的例子的相关代码：

<!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>

来源

2016-07-18 07:01:46 Torben

阅读.......... –

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

来源

2016-07-18 07:11:38

完成，它是一样的... –

把div（bid-toolbar）放在页面的底部。在“损坏的照片”后，如果它是最后一个格 –

查找所有代码... –

您可以使用jQuery来维持出价工具栏下方尝试此代码，请注意我用了一个ID #bid_toolBar您便可以将其更改为类想要。

$(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) 

});

来源

2016-07-18 07:17:02 Terabyte

我没有真正得到这个，.. –

尝试这个代码... –

你没有得到什么部分本 – Terabyte

你可以尝试添加：

-webkit-transform: translateZ(0);

或者这其实只是设备/浏览器的问题。

来源

2016-07-18 07:48:00 divz

我正在使用英特尔XDK ...不知道是否是这种情况cus我试过几种方法...并在仿真器上测试 –

不知道intel XDK。也许这可能有帮助> [链接]（https://software.intel.com/zh-cn/forums/intel-xdk/topic/621742） – divz

谢谢，这很有用 –

棒工具栏底部

回答

相关问题