记录采坑：

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

　　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. 谷歌PM面试官告诉你，如何成功拿到理想offer

    快来看看大咖Nick如何甄选人才~文章转自墨刀公众号. 本文作者: Nick Baum,目前在谷歌做PM 作为谷歌的产品经理和面试官,我已经面过几百个PM的候选人了吧.这些经历能让我分享一下在PM求职 ...

  2. python数据结构-如何为元组中的每个元素命名

    如何为元组中的每个元素命名 简述 当对象数据格式固定时,用元组比列表更节省内存空间, 我们使用索引访问元组元素,但是这种访问方式会降低程序的可读性. 举个栗子 对于学生的信息,我们有固定的数据格式,我 ...

  3. leaflet实用插件整理

    leaflet实用插件整理: https://www.giserdqy.com/webgis/leaflet/4920/leaflet%E5%AE%9E%E7%94%A8%E6%8F%92%E4%BB ...

  4. fiddler学习总结--autoresponder替换资源

    意义:替换服务器返回的内容 1.找到需要替换的目标 2.选择目标后,点击“autoresponder”-->”add  rules” 3.在下图中,选择“find a file”,再选择需要替换 ...

  5. Docker 基础 (一)

    为什么要使用 Docker? 作为一种新兴的虚拟化方式,Docker 跟传统的虚拟化方式相比具有众多的优势.首先,Docker 容器的启动可以在秒级实现,这相比传统的虚拟机方式要快得多. 其次,Doc ...

  6. 【运维技术】redis（一主两从三哨兵模式搭建）记录

    redis(一主两从三哨兵模式搭建)记录 目的: 让看看这篇文章的的人能够知道:软件架构.软件的安装.配置.基本运维的操作.高可用测试.也包含我自己,能够节省对应的时间. 软件架构: 生产环境使用三台 ...

  7. Tomcat日志文件catalina.out文件过大问题

    随着项目的运行,Tomcat的日志文件catalina.out的大小日益增大,现在都有好几个GB了.如果我们不做任何处理,catalina.out的文件大小将会持续增加,直到把我们的系统硬盘空间给撑爆 ...

  8. javax.el.PropertyNotFoundException: Property 'know_id' not found on type java.lang.String

    今天通过Servlet明明查出来了结果,在跳转到页面时报这个异常.根据经验仔细核对了字段书写时,未发现错误. 耐心仔细检查之后发现el表达式的List集合写错了 <c:forEach items ...

  9. 给datagrid的日期格式化成年月日

    $('#infos').datagrid({ title:'系统版本列表', iconCls:'icon-view', method:'POST', singleSelect:false, fit : ...

  10. 基于ROS和python，通过TCP通信协议，完成键盘无线控制移动机器人运动

    一.所需工具包 1.ROS键盘包:teleop_twist_keyboard 2.TCP通讯包:socket $ cd ~/catkin_ws/src $ git clone https://gith ...