bootstrap 固定底部导航自适应
在使用bootstrap 底部导航的时候遇到了一个问题 —— 当我的内容超过一屏的时候,底部的部分内容会被固定的导航内容遮盖
自己写了一个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 固定底部导航自适应的更多相关文章
- Bootstrap 固定底部导航栏菜单
直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" ...
- 固定底部导航菜单-续集(BottomMenu-移动端V3.0)
固定底部导航菜单-续集(BottomMenu-移动端V3.0) 适应在客户端,点击弹出二级菜单.因为手机不支持hover.所以使用click点击实现弹出菜单,并且一级菜单聚焦变色,变化背景图片 核心c ...
- 第二百三十八节,Bootstrap输入框和导航组件
Bootstrap输入框和导航组件 学习要点: 1.输入框组件 2.导航组件 3.导航条组件 本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一.输入框组件 文 ...
- Bootstrap<基础十七>导航栏
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...
- Bootstrap 固定定位(Affix)
来自:慕课网 http://www.imooc.com/code/5396 Affix 效果常见的有以下三种: ☑ 顶部固定 ☑ 侧边栏固定 ☑ 底部固定 固定定位--声明式触发固定定位 Affix ...
- bootstrap的 附加导航Affix导航 (侧边窄条式 滚动监控式导航) 附加导航使用3.
affix: 意思是粘附, 附着, 沾上. 因此, 附加导航就是 bootstrap的 Affix.js组件. bootstrap的 附加导航, 不是说导航分成主导航, 或者什么 副导航的 而是指, ...
- 如何写一个适配iPhoneX的底部导航
引言 iPhoneX发布至今已经有将近一年的时间了,各类app都多多少少做了对iPhoneX的适配,那对于我们H5页面该做哪方面的适配呢? 首先了解安全区域(safe area)的概念,它保证了内容在 ...
- 布局:上下两个div高度固定,中间自适应
需求:经典布局 —— 头尾固定高度中间高度自适应布局 头部固定高度,宽度100%自适应父容器: 底部固定高度,宽度100%自适应父容器: 中间是主体部分,自动填满,浏览器可视区域剩余部分,内容超出则中 ...
- Flutter - 创建底部导航栏
之前写过的一篇文章介绍了 Flutter - 创建横跨所有页面的侧滑菜单, 这次就一起来学习一下底部导航栏. 底部导航栏在ios平台上非常常见,app store就是这样的风格.还有就是大家最常用的微 ...
随机推荐
- Python开发入门与实战1-开发环境
1.搭建Python Django开发环境 1.1.Python运行环境安装 Python官网:http://www.python.org/ Python最新源码,二进制文档,新闻资讯等可以在Pyth ...
- iOS开发多线程篇—线程间的通信(转)
这里转载 给自己一个备份 一.简单说明 线程间通信:在1个进程中,线程往往不是孤立存在的,多个线程之间需要经常进行通信 线程间通信的体现 1个线程传递数据给另1个线程 在1个线程中执行完特定任务后,转 ...
- Ubuntu 14.10 下安装Ganglia监控集群
关于 Ganglia 软件,Ganglia是一个跨平台可扩展的,高性能计算系统下的分布式监控系统,如集群和网格.它是基于分层设计,它使用广泛的技术,如XML数据代表,便携数据传输,RRDtool用于数 ...
- 如何通过 GT 快速开始性能测试?
http://gt.tencent.com/docs/a/2.1/GTAndroidQuickStart.pdf Summary 安装 GT(GT.apk)后,不需要连接 PC 和在被测应用中插入代码 ...
- SmartZoneOCR识别控件免费下载地址
SmartZone™光学字符识别工具包,使开发人员能够进行带状区域光学字符识别,带状区域在表单处理应用程序中经常使用.本产品所包含的.NET控件以及ActiveX COM组件在内部使用两种单独的识别技 ...
- 显示ios设备信息的程序
以下是运行在本人iphone4上的截图,支持中文简体,中文繁体,英文,支持iphone和ipad,当然由于没有ipad,ipad的测试用的模拟器.支持iphone4的Retina屏幕.本来有6个标签, ...
- ecpilise引入Maven项目目录不正常,无JRE,无Maven Dependencies
原因是我的eclipse默认open perspective是java ee,改成java就恢复正常了.
- Object-C 基础笔记3---属性
一,区别属性和实例变量 实例变量就是声明在接口大括号里面的变量.@public类型的实例变量直接使用->访问, property 属性是一组设置器和访问器,属性是方法不是变量. 与类相似,属性需 ...
- ie6下png背景显示问题?
针对ie6下png背景显示问题,CSS中可以这样解决:_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoad ...
- 解决:子元素设置margin-top,父元素也受影响的问题
<!doctype html><html> <head> <meta charset="UTF-8"> <title>子 ...