将工具栏粘贴到底部答案

【问题标题】：Stick the toolbar to bottom将工具栏粘贴到底部
【发布时间】：2016-11-20 16:10:49
【问题描述】：

我的代码

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

我想让黄色工具栏粘在底部。我试过几次把这个工具栏放到底部，但每次我做的时候

fixed

，当我向下滚动页面时，它会上升，如下图所示。

【问题讨论】：

尝试添加 !important 或只提供指向您页面的链接
！对这个职位很重要你的意思是？
添加了！重要，没有改变任何东西...

标签： css toolbar footer fixed

【解决方案1】：

使用position: fixed 经常会导致移动浏览器出现问题。您可以将display:flex 与overflow:auto 结合使用以获得固定页脚而不使用固定定位：

<!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 并用display:table 来实现它们。下面是一个简单示例中的相关代码：

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

【讨论】：

【解决方案2】：

而不是position:fixed 使其成为absolute 的位置属性

position:absolute;

【讨论】：

还是一样 ;)
好的，你能做一个 jsfiddle 吗？因为我无法理解为什么会这样，它应该可以工作。
ok 右键单击元素并检查它，看看元素是否从类中获取属性
我实际上是在英特尔 XDK 上混合移动应用程序......不知道如何检查它
是的，但这是一个 html 页面，所以你可以在浏览器中打开它并检查它。或者复制那个 html 页面。

【解决方案3】：

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

【讨论】：

将 div（出价工具栏）放在页面底部。如果是最后一个 div，则在“损坏的照片”之后

【解决方案4】：

您可以尝试添加：

-webkit-transform: translateZ(0);

或者这实际上只是设备/浏览器问题。

【讨论】：

我正在使用intel XDK...不确定是否是这种情况，因为我尝试了几种方法...并在模拟器上进行了测试
不确定英特尔 XDK。可能这可能会有所帮助> link
谢谢，很有用

【解决方案5】：

您可以使用 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)

});

【讨论】：

你没有得到 Ben 的哪一部分
我试着理解这段代码，.. 使用了这个但不确定除了#bid_toolBar 之外我需要更改哪个部分
完成，是否意味着我必须删除位置：固定；底部：0；在我的 CSS 中。？
是的，删除 css 并显示你的 css 代码（如果有）
还是一样的....bid-toolbar { background:#FFCD2F !important; height:70px !important; /* position: fixed; bottom: 0px; -webkit-transform: translateZ(0);*/ }