bootstrap 固定底部导航自适应
2016-09-07 18:00
393 查看
在使用bootstrap 底部导航的时候遇到了一个问题 —— 当我的内容超过一屏的时候,底部的部分内容会被固定的导航内容遮盖
自己写了一个JS脚本,解决自适应的问题
自己写了一个JS脚本,解决自适应的问题
<nav class="navbar navbar-default navbar-fixed-bottom"> <div class="container-fluid margin_bottom_5 margin_top_5 clear_padding text-center"> <button class="btn btn-e4005a" type="button" style="padding: 6px 30px;">提交</button> </div> </nav> <script> $(function(){ autoNav(); }); //解决底部自动导航的问题 function autoNav(){ //获取内容的高度 var bodyHeight = $("body").height(); //获取底部导航的高度 var navHeight = $(".navbar").height(); //获取显示屏的高度 var iHeight = document.documentElement.clientHeight||document.body.clientHeight; //如果内容的高度大于(窗口的高度 - 导航的高度),z则需要添加一个div,设置其高度 if(bodyHeight > (iHeight - navHeight)){ $("body").append('<div style="height: '+navHeight+'px"></div>'); } } </script>
相关文章推荐
- bootstrap 固定底部导航自适应
- 纯css实现固定在网页底部菜单导航
- 纯CSS打造兼容各大浏览器的底部固定悬浮导航
- Bootstrap制作 精美渐变顶部固定自适应导航栏
- bootstrap-自适应导航
- 解决 scroll() position:fixed 抖动、导航菜单固定头部(底部)跟随屏幕滚动
- 好用的自适应表格插件-bootstrap table (支持固定表头)
- bootstrap中实现外层DIV自适应,内层DIV宽度固定且居中的布局
- 仿天涯底部固定漂浮导航
- CSS实现自适应高度布局:头部底部固定,中间自适应铺满屏幕剩余高度,中间盒子里左盒子固定右盒子自适应宽度
- <转>js 底部固定, 底部固定漂浮导航,无JS纯CSS定义
- LinearLayout 布局 底部固定导航
- bootstrap-导航条固定在底部
- 仿天涯底部固定漂浮导航
- 总结--IE6,IE7,IE8,火狐都支持:js/css 底部固定, 底部固定漂浮导航效果
- NO.24 关于左侧div固定宽度,右侧自适应时footer不能在最底部的问题
- 固定底部导航
- 固定底部导航菜单-续集(BottomMenu-移动端V3.0)
- 前端之-三列布局。顶部-底部-中间两侧固定。中间内容自适应
- bootstrap表格如何固定宽度或者自适应内容的宽度