这两天整理一下 WebBroker 写的 CMS 的代码,清理一下页面框架。
页面框架使用了 Bootstrap V3 (V4 出来了,但网上的例子代码,在 V4 底下呈现出来会有问题,在 V3 底下没问题)。
页面抬头的主菜单,在 Bootstrap 里面叫做导航条。这个导航条可以随着页面向上滚动而一起滚动,也可以固定置顶,页面滚动时它始终显示在页面顶部。
导航条固定置顶,是给导航条的 class 里面添加:class .navbar-fixed-top, 比如在我自己的例子代码里,就是:
<div class="navbar navbar-inverse navbar-fixed-top">
然后,在增加了固定置顶的属性后,页面正文的顶部,就会被这个导航条遮住。要让正文顶部下移,给页面的 <Body> 添加 style 的属性:<body style="padding-top:50px">
直接在页面里面写::<body style="padding-top:50px">, 就要每个页面都要写。因此最好写到外部 css 文件里面。
在外部 CSS 文件里面写:
body{padding-top: 50px} 在 FireFox 浏览器底下效果出来了,在 Chrome 底下没有效果。网上查了一下,查到:http://www.miaojingyun.com/post/286.html,应该写成:
body {padding-top: 50px;
overflow:hidden;
}
加上 overflow:hidden; Chrome 底下效果出来了。FireFox 效果仍然在。多谢这位博客主人:苗景云
-----------------------------------
又及:
这里为 Body 增加了一个 padding 以后,整个页面长度超出浏览器高度时,浏览器不会出滚动条了。
因此,要换个解决办法:
在导航条的底下,增加一个 div,给它的 css 里面,设置一个最小高度,也就是出来一个空白的高度:
<div class="Splitter"> </div>
.Splitter{
min-height: 52px;
}
这个办法测试结果OK。
页面内容在这个 div 底下。这样一来,整个页面内容都向下偏倚了 52 个像素,内容的顶部就不会被导航条遮蔽了。