CSS布局-body高度不等于页面高度
记录采坑:
博客记录问题,用作回忆用,不喜勿喷!
html,body{width: 100%; height: 100%}这是初始定义的宽高。在布局越写越复杂的时候,布局很容易出现问题,例如一个页面中有若干个需要 display: none/block 来隐藏显示的其他页面时,布局容易出现背景只有一屏,超过一屏的地方空白,没有背景!即body、或者根div main它的高度远远小于实际高度,当然这是布局有问题,一般不会出现这种问题,那么在已经出现了这种问题又不想修改布局(布局很复杂)的情况下,采用如下办法即可解决:
在根根根!div下 加上 min-height: 100%; 去掉 height: 100%; 这个能解决一部分问题,至于添加了上述代码,页面底部仍然还有一部分留白(无背景),那应该是最后一个元素运用了 margin-bottom: xxvw;检查一下,页面最后一个元素是否有 margin 属性,如有,在其后面添加一个空的div标签即可解决问题。如还不行,在那个添加的空的div标签内部加上   。解决问题

CSS布局-body高度不等于页面高度的更多相关文章
- javascript:控制一个元素高度始终等于浏览器高度
window.onresize = function(){ this.opHtight()} //给浏览器添加窗口大小改变事件window.onresize = function(){ this.op ...
- css布局相关:涉及到常见页面样式难点
一.display:table用法 Table:display:tableBody:table-row-group;Tr: table-row;Td: table-cell https://www.c ...
- PHP.5-DIV+CSS布局网站首页实例
DIV+CSS布局网站首页实例 网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html[页头.页脚.侧边栏和内容区域] #避免各浏览器对CSS ...
- DIV+CSS布局中自适应高度的解决方法
div乱跑问题 (文件<DIV+CSS布局中自适应高度的解决方法.rar>) float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...
- CSS布局中最小高度的妙用
CSS布局中最小高度的妙用 --最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持B ...
- CSS 控制Html页面高度导致抖动问题的原因
CSS 控制Html页面高度导致抖动,这类由高度导致页面抖动的问题,其实究其根本原因是滚动条是否显示导致的 在CSS中添加如下代码: html,body{ overflow-y:scroll;} ht ...
- CSS布局:div高度随窗口变化而变化(BUG会有滚动条)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css3 的 calc()函数在布局中的使用----头部高度固定,页面正好占满一屏
最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{ position: relative; margin-left: 24px; marg ...
- DIV+CSS布局时, DIV的高度和宽度特性
这个没有特别的做要求,你要根据你自己的页面整体布局来设置,还有根据div的特性来设置,div默认情况是宽度最大化(100%).高度最小化,高度随着内容自动伸展: 一般情况做网页的话,大部分都是固定了总 ...
随机推荐
- Vue引入elementUI组件全过程
参考:https://www.cnblogs.com/fubinbin/p/9938528.html 在vue脚手架安装完成之后,页面正常跳出vue刚安装完的界面 我们开始引入elementui 1. ...
- Eclipse安装fatjar(不用自己下载fatjar包)
.安装Eclipse-jee-luna-SR2-win32-x86_64版本的插件支持 方法如下: Help -> Install New Software... -> Work with ...
- 检查文件是否被修改或者被破坏工具 md5
检查文件和对应的md5值是否一致.
- Oracle 24角色管理
了解什么是角色 Oracle角色(role)就是一组权限(或者说是权限的集合). 用户可以给角色赋予指定的权限,然后将角色赋给相应的用户. 三种标准的角色 connect(连接角色) 拥有connec ...
- fiddler学习总结--Web端抓包
步骤一: Fiddler的基本配置:Tools-->option-->Connections: 就可以进行抓包了 步骤二: 可以通过一些设置过滤: 步骤三: 抓取HTTPS的请求:1.安装 ...
- Sigleton bj
package com.bjsxt.base; class Sigleton{ private Sigleton(){}; private static Sigleton instance = new ...
- windows 允许其他电脑访问本地mysql数据库
第一步:用ping命令测试两台电脑是否连通 如果两台电脑是连通的请转到第二步,如果是非连通的请进行如下操作: 1.进入控制面板,打开Windows Defender 防火墙,点击高级设置(本人用的是W ...
- 为什么一个java源文件中只能有一个public类
问题:一个".java"源文件中是否可以包括多个类(不是内部类)?有什么限制? 答案:可以有多个类,但只能有一个public的类,并且public的类名必须与文件名相一致.一个文件 ...
- mybatis源码解析11---ParameterHandler解析
ParameterHandler接口是参数处理器,位于mybatis包的org.apache.ibatis.executor.parameter下,源码如下: public interface Par ...
- C++找不出来的bug
1.在函数中给指针赋值时候要极其注意: 新生成的指针要么是new出来的,要么是全局的,要么是传参过来的... 就是要切记在函数局部生成一个新指针,这样的话,出了这个函数,局部的新指针所具体代表的值就被 ...