将工具栏粘贴到底部
Posted
技术标签:
【中文标题】将工具栏粘贴到底部【英文标题】：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 或只提供指向您页面的链接 ！对这个职位很重要你的意思是？ 添加了！重要，没有改变任何东西... 【参考方案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);*/ 以上是关于将工具栏粘贴到底部的主要内容，如果未能解决你的问题，请参考以下文章
使用 PlatformConfiguration (Xamarin.Forms 2.3.3) 在 UWP 中将工具栏移动到底部