遮挡
//登陆
用的mui框架，首页和登陆页面都出现了顶部导航<header class="mui-bar mui-bar-nav">遮挡<div class="mui-content">的问题，如下图所示
<div class="wrap">是320X440,header是320X40,感觉是正确的。
但是图二，在审查器查看<div class="wrap">的父级div——<div class="mui-content">发现布局跑到header下面，相比起<div class="wrap">上去了40px
在元素审查里面看到有个padding-top属性，不是很理解这个属性，但是我根据我自己设置的header的高度2rem重写了padding-top，如下。
.mui-bar-nav ~ .mui-content{
padding-top:2rem;
}
//首页
还有首页中也有相同的问题，不同的是，登陆界面仅仅是<div class="mui-content">跑上去了，但是主页的内容跑上去了，导致主体内容被header遮挡了40px(2rem)，而底部空了40px(2rem).高度原本计算的是：header-2rem,content-20rem(slider-8rem+功能模块-3*4rem),底部-2rem.
第一次用mui，对于布局这一块不是很懂，望指教，谢谢~
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web
技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
//登陆
用的mui框架，首页和登陆页面都出现了顶部导航<header class="mui-bar mui-bar-nav">遮挡<div class="mui-content">的问题，如下图所示
<div class="wrap">是320X440,header是320X40,感觉是正确的。
但是图二，在审查器查看<div class="wrap">的父级div——<div class="mui-content">发现布局跑到header下面，相比起<div class="wrap">上去了40px
在元素审查里面看到有个padding-top属性，不是很理解这个属性，但是我根据我自己设置的header的高度2rem重写了padding-top，如下。
.mui-bar-nav ~ .mui-content{
padding-top:2rem;}
//首页
还有首页中也有相同的问题，不同的是，登陆界面仅仅是<div class="mui-content">跑上去了，但是主页的内容跑上去了，导致主体内容被header遮挡了40px(2rem)，而底部空了40px(2rem).高度原本计算的是：header-2rem,content-20rem(slider-8rem+功能模块-3*4rem),底部-2rem.
第一次用mui，对于布局这一块不是很懂，望指教，谢谢~
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的
隐私政策
了解更多相关信息。 单击
接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
原文
发布评论
评论（1）
通过审查元素，可以清楚地看到。
.mui-bar，是fixed定位，会始终占用某块区域的高度。
.mui-content的padding-top是为了挤压容器的top区域，相当于给header部分让出了它所需要的高度。
这样结合使用，就content部分就不会被head部分遮挡了。