记录采坑：

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

　　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. zabbix-agent 在SElinux Enforcing 状态的文件权限问题及解决办法

    因为某种原因必须要开启SElinux,用yum装了一个zabbix-agent 替换了一下配置文件结果悲剧了 # systemctl restart zabbix-agent ● zabbix-age ...

  2. centos7.5图形界面与命令行界面转换

    查看当前状态下的显示模式: # systemctl get-default 转换为图形界面: # systemctl set-default graphical.target 转换为命令行界面: # ...

  3. DRF之认证组件源码解析

    认证组件  认证的几种方法:cookie,session,token几种.但是session会使服务器的压力增大,所以我们经常使用的是token.获取唯一的随机字符串: 登陆携带token值的处理: ...

  4. 使用Python在自己博客上进行自动翻页

    先上一张代码及代码运行后的输出结果的图! 下面上代码: # coding=utf-8 import os import time from selenium import webdriver #打开火 ...

  5. CRT/LCD/VGA Information and Timing

    彩色阴极射线管的剖面图: 1. 电子QIANG Three Electron guns (for red, green, and blue phosphor dots)2. 电子束 Electron ...

  6. TPS54331 TPS54332 3.5V to 28V Input, 3A, 570kHz Step-Down Converter with Eco-mode

    The TPS54331 is a 28-V, 3-A non-synchronous buck converter that integrates a low RDS(on) high side M ...

  7. JAVA值传递之基本数据类型和引用数据类型

    #1.基本数据类型值传递 package 经典小Demo.值传递; public class Test { public static void main(String[] args) { int a ...

  8. Lucene的深入

    Lucene创建索引 第一.创建文档对象 第二.创建Field对象(各种类型)整数String.Text.Long.Float.Double等... Field对象 包含三大属性:是否分词,是否索引, ...

  9. golang中 "下划线" 的用法

    1.忽略返回值 这个应该是最简单的用途,比如某个函数返回三个参数,但是我们只需要其中的两个,另外一个参数可以忽略,这样的话代码可以这样写: v1, v2, _ := function(...) 2.用 ...

  10. 腾讯出品的一个超棒的 Android UI 库

    腾讯出品的一个超棒的 Android UI 库 相信做 Android 久了大家都会有种体会,那就是 Android 开发相对于前端开发来说统一的 UI 开源库比较少.造成这种现象的原因一方面是大多数 ...