在使用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 固定底部导航自适应的更多相关文章

  1. Bootstrap 固定底部导航栏菜单

    直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" ...

  2. 固定底部导航菜单-续集(BottomMenu-移动端V3.0)

    固定底部导航菜单-续集(BottomMenu-移动端V3.0) 适应在客户端,点击弹出二级菜单.因为手机不支持hover.所以使用click点击实现弹出菜单,并且一级菜单聚焦变色,变化背景图片 核心c ...

  3. 第二百三十八节,Bootstrap输入框和导航组件

    Bootstrap输入框和导航组件 学习要点: 1.输入框组件 2.导航组件 3.导航条组件 本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一.输入框组件 文 ...

  4. Bootstrap<基础十七>导航栏

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  5. Bootstrap 固定定位(Affix)

    来自:慕课网 http://www.imooc.com/code/5396 Affix 效果常见的有以下三种: ☑ 顶部固定 ☑ 侧边栏固定 ☑ 底部固定 固定定位--声明式触发固定定位 Affix ...

  6. bootstrap的 附加导航Affix导航 (侧边窄条式 滚动监控式导航) 附加导航使用3.

    affix: 意思是粘附, 附着, 沾上. 因此, 附加导航就是 bootstrap的 Affix.js组件. bootstrap的 附加导航, 不是说导航分成主导航, 或者什么 副导航的 而是指, ...

  7. 如何写一个适配iPhoneX的底部导航

    引言 iPhoneX发布至今已经有将近一年的时间了,各类app都多多少少做了对iPhoneX的适配,那对于我们H5页面该做哪方面的适配呢? 首先了解安全区域(safe area)的概念,它保证了内容在 ...

  8. 布局:上下两个div高度固定,中间自适应

    需求:经典布局 —— 头尾固定高度中间高度自适应布局 头部固定高度,宽度100%自适应父容器: 底部固定高度,宽度100%自适应父容器: 中间是主体部分,自动填满,浏览器可视区域剩余部分,内容超出则中 ...

  9. Flutter - 创建底部导航栏

    之前写过的一篇文章介绍了 Flutter - 创建横跨所有页面的侧滑菜单, 这次就一起来学习一下底部导航栏. 底部导航栏在ios平台上非常常见,app store就是这样的风格.还有就是大家最常用的微 ...

随机推荐

  1. 《day17_String_StringBuffer》

    package cn.itcast.api.string; public class StringDemo{ public static void main(String[] args){ //定义一 ...

  2. 获得servletContext的路径的方法

    request.getSession().getServletContext().getRealPath("")或 System.getProperty("webapp. ...

  3. Scheme vs Schema

    在计算机数据描述领域,Scheme由于原意为“主题”,“方案”,“构想”等,因此一般指比较明确的(具体的)“方案”.“体系”,例如一个术语词表.分类表等,而Schema通常翻译成“模式”,比较强调形式 ...

  4. 测试题1 IOS面试基础题

    免责声明:答案来自本人,错误之处敬请谅解 1.用变量a写出以下定义 a.一个整型数    int a=5; b.一个指向整型数的指针  int *a; c.一个指向指针的指针,它指向的指针是指向一个整 ...

  5. Codeforces Round #365 (Div. 2)-D Mishka and Interesting sum(树状数组)

    题目链接:http://codeforces.com/contest/703/problem/D 思路:看了神犇的代码写的... 偶数个相同的数异或结果为0,所以区间ans[l , r]=区间[l , ...

  6. aspx页面图片用作html中img的url

    背景:如果无法直接访问保存图片的服务器,我们可以先制作一个aspx页面用来接受服务器发送过来的图片,然后html页面请求aspx页面.对图片服务器起一定的缓冲保护作用,预防对黑客攻击造成危害. 注意: ...

  7. magento添加多个产品到购物车(Add multiple products to cart )

    Step  1app\design\frontend\base\default\template\catalog\product\list.phtml<?php    $_productColl ...

  8. nginx模块_使用gdb调试nginx源码

    工欲善其事必先利其器,如何使用调试工具gdb一步步调试nginx是了解nginx的重要手段. ps:本文的目标人群是像我这样初接触Unix编程的同学,如果有什么地方错误请指正. 熟悉gdb的使用 这里 ...

  9. 架设 OpenLDAP服务器(转)

    OpenLDAP是一个开放源代码的软件,可以免费获取使用,其主页地址是:http://www.openldap.org/.在RHEL 6上安装OpenLDAP还需要libtool-ltdl-2.2.6 ...

  10. mySQL-CRUD操作(数据库的增删改查)练习题

    一.设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表(四)所示,数据如表1-2 ...