记录采坑：

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

　　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. 家庭记账本之微信小程序（六）

    Wxss的学习 WXSS(WeiXin Style Sheets)是一套样式语言,用于描述WXML的组件样式. WXSS用来决定WXML的组件应该怎么显示. 为了适应广大的前端开发者,我们的WXSS具 ...

  2. WGDC2019第八届全球地理信息开发者大会（北京）

    WGDC2019第八届全球地理信息开发者大会 会议召开时间:2019-07-09 08:00至 2019-07-10 18:00结束 会议召开地点:北京  北京国际会议中心  朝阳区北辰东路8号 会议 ...

  3. 测试Oracle统计信息的导出导入

    背景:有时我们会希望可以对Oracle的统计信息整体进行导出导入.比如在数据库迁移前后,希望统计信息保持不变;又比如想对统计信息重新进行收集,但是担心重新收集的结果反而引发性能问题,想先保存当前的统计 ...

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

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

  5. 221. Maximal Square(动态规划)

    Given a 2D binary matrix filled with 0's and 1's, find the largest square containing only 1's and re ...

  6. 2014年西安区域赛的几道水题（A. F. K）

    A . 问一组数能否全部被3整除 K. S1 = A, S2 = B, Si = |Si-1  -  Si-2|; 一直循环问, 出现了多少不同的数: 多模拟几组数, 可以发现和辗转相除法有很大关系 ...

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

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

  8. 怎么让table中的<td>内容向上对齐

    <td valign="top"></td>

  9. 剑指offer（5）用两个栈实现队列

    题目描述 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 题目分析 栈是先进后出,队列是先进先出,因此两个栈,一个用来push,一个用来pop,同时注意下两个栈不 ...

  10. 剑指offer（56）删除链表中重复的节点

    一直忘记更新了,把剑指offer更新完吧.... 题目描述 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3-&g ...