Question

我使用的是显示标题和后退按钮，它始终锁定在屏幕顶部。同样在页面上我使用和显示一个表。该表格包含一个＆＃39;标题＆＃39;我想要锁定的行（在工具栏下面），但我无法锁定它。我已经使用了以下但没有成功，但如果我把代码放在一个空白的html页面上它可以工作吗？在锁定标题时会非常喜欢帮助。行。

<ons-toolbar>
    <div class="left"><ons-back-button>Back</ons-back-button></div>
    <div class="center toolbar-header">Page Title</div>
</ons-toolbar>

<!-- I want to fix this row below the toolbar-->        
<ons-row class="top">
    <ons-col width = "50%">
        <div >Header text</div>           
    </ons-col>
<ons-col width="12.5%">
<div>Item 1</div> 
    </ons-col>
    <ons-col width="12.5%">
<div >Item 2</div>
    </ons-col>
    <ons-col width="12.5%">
<div >Item 3</div>
    </ons-col>
    <ons-col width="12.5%">
<div >Item 4</div>
    </ons-col>
</ons-row>

<style>
.top{
     position: fixed;
     top:0px;
     left: 0px;
     bottom: 0px;
     right: 0px;
     text-align: center;
}
</style>

Answer 1

导航栏的高度为44px，因此您需要将top值设置为相同的高度，将其向下推到导航栏下方：

.top {
  position: fixed;
  top: 44px;
  ...
}

请看这个样本： http://codepen.io/argelius/pen/ZYPRbj

修复工具栏后的div位置

1 个答案: