【问题标题】: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:flexoverflow: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);*/ }
    猜你喜欢
    • 2023-03-29
    • 1970-01-01
    • 1970-01-01
    • 2016-07-29
    • 1970-01-01
    • 2014-11-09
    • 2016-04-12
    相关资源
    最近更新 更多