Question

我的代码

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

我想让黄色工具栏粘在底部。我已经尝试了几次使这个工具栏到底，但每当我做它

fixed

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

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

Answer 2

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

position:absolute;

Answer 3

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

Answer 4

您可以使用jQuery保持出价工具栏底部尝试此代码，并注意我使用了ID #bid_toolBar，如果您愿意，可以将其更改为类。

    <script>

    function show1() {
        document.getElementById("div1").classList.toggle("show");
    }
    window.onclick = function(event) {
        if (!event.target.matches('.button1'))
            var dropdowns = document.getElementsByClassName("div1_pop");
    }
    function show2() {
        document.getElementById("div2").classList.toggle("show");
    }
    window.onclick = function(event) {
        if (!event.target.matches('.button2'))
        var dropdowns = document.getElementsByClassName("div2_pop");
    }

    </script>

Answer 5

您可以尝试添加：

-webkit-transform: translateZ(0);

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

将工具栏粘贴到底部

5 个答案: