记录采坑：

博客记录问题，用作回忆用，不喜勿喷！

　　html,body{width: 100%; height: 100%}这是初始定义的宽高。在布局越写越复杂的时候，布局很容易出现问题，例如一个页面中有若干个需要 display: none/block 来隐藏显示的其他页面时，布局容易出现背景只有一屏，超过一屏的地方空白，没有背景！即body、或者根div main它的高度远远小于实际高度，当然这是布局有问题，一般不会出现这种问题，那么在已经出现了这种问题又不想修改布局（布局很复杂）的情况下，采用如下办法即可解决：

　　在根根根！div下 加上 min-height: 100%; 去掉 height: 100%; 这个能解决一部分问题，至于添加了上述代码，页面底部仍然还有一部分留白（无背景），那应该是最后一个元素运用了 margin-bottom: xxvw；检查一下，页面最后一个元素是否有 margin 属性，如有，在其后面添加一个空的div标签即可解决问题。如还不行，在那个添加的空的div标签内部加上 &nbsp 。解决问题

     

CSS布局-body高度不等于页面高度的更多相关文章

  1. javascript：控制一个元素高度始终等于浏览器高度

    window.onresize = function(){ this.opHtight()} //给浏览器添加窗口大小改变事件window.onresize = function(){ this.op ...

  2. css布局相关:涉及到常见页面样式难点

    一.display:table用法 Table:display:tableBody:table-row-group;Tr: table-row;Td: table-cell https://www.c ...

  3. PHP.5-DIV+CSS布局网站首页实例

    DIV+CSS布局网站首页实例 网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html[页头.页脚.侧边栏和内容区域] #避免各浏览器对CSS ...

  4. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  5. CSS布局中最小高度的妙用

    CSS布局中最小高度的妙用 --最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持B ...

  6. CSS 控制Html页面高度导致抖动问题的原因

    CSS 控制Html页面高度导致抖动,这类由高度导致页面抖动的问题,其实究其根本原因是滚动条是否显示导致的 在CSS中添加如下代码: html,body{ overflow-y:scroll;} ht ...

  7. CSS布局：div高度随窗口变化而变化(BUG会有滚动条)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. css3 的 calc()函数在布局中的使用----头部高度固定，页面正好占满一屏

    最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{ position: relative; margin-left: 24px; marg ...

  9. DIV+CSS布局时， DIV的高度和宽度特性

    这个没有特别的做要求,你要根据你自己的页面整体布局来设置,还有根据div的特性来设置,div默认情况是宽度最大化(100%).高度最小化,高度随着内容自动伸展: 一般情况做网页的话,大部分都是固定了总 ...

随机推荐

  1. 监听器&上传下载&I18N

    监听器(Listener) 监听Java对象 的方法调用和属性改变() web的一个组件 事件驱动编程:事件源,事件名称,事件响应函数,事件对象 以后在Spring中的配置 WEB中有哪些监听器?  ...

  2. 在CentOS 7中安装与配置Tomcat-8.5方法

    安装说明 安装环境:CentOS-7 安装方式:源码安装 软件:apache-tomcat-8.5.39.tar.gz下载地址:http://tomcat.apache.org/download-80 ...

  3. python_高级特征

    切片 Slice  : 取一个tuple的前三个元素,传统做法如下 : for i in range(3): dataList.append(testTuple[i]) if i == 2: prin ...

  4. PyQt5学习笔记

    setMouseTracking bool mouseTracking这个属性保存的是窗口部件跟踪鼠标是否生效.如果鼠标跟踪失效(默认),当鼠标被移动的时候只有在至少一个鼠标按键被按下时,这个窗口部件 ...

  5. P1744 采购特价商品 最短路径

    P1744 采购特价商品 图论-----最短路径算法 弗洛伊德算法  O(n^3) 代码: #include<iostream> #include<cstdio> #inclu ...

  6. npm报错处理

    在npm install 命令下载的时候经常会出现下面的报错: 解决办法: npm cache clean --force npm install

  7. MySQL查询命令_SELECT 子查询

    首先创建一个table mysql> create table Total (id int AUTO_INCREMENT PRIMARY KEY,name char(20),stu_num in ...

  8. Learning-Python【32】：进程理论基础

    什么是进程 进程就是一个程序在一个数据集上的一次动态执行过程.是用来描述程序执行过程的虚拟概念.进程的概念起源于操作系统,进程是操作系统最核心的概念,操作系统其它所有的概念都是围绕进程来的.进程一般由 ...

  9. 将nginx添加至service服务

    一.问题描述: 无法用service命令启动nginx 二.问题分析: /etc/init.d/目录下缺少nginx默认启动脚本 三.问题解决: 在/etc/init.d/路径下添加脚本文件,名称为n ...

  10. Centos7初始化脚本

    今天分享一个自己写的一个初始化的小脚本. 编写初始化系统要考虑到系统的版本问题,现在用的比较多的就是centos6和centos7,所以首先要判断一下系统的版本. cat /etc/redhat-re ...