问题:对于固定定位的元素,固定住高度,后面紧跟的模块会当做前面的固定元素不存在似的,这给布局带来了困扰

解决方法:

1.给第二个模块div设置margin-top的值,margin-top的值设为大于等于固定定位模块的高度

2.这个方法是百度百科手机页面用的,先为固定定位元素设一个父元素,不设高度,不设宽度,什么都不设,他的第一个子元素是我们需要做固定定位的元素,这个按照需求写好样式,此时,父元素的高度依然是0,如何使得父元素有高度呢,父元素有了高度,后面来的模块就不用设置margin-top的值了,我们只要在固定定位元素后面写一个同等高度的空div便解决了,这时父元素就有高度了,而且正是我们需要的高度,这个空的div像一根柱子,支撑起了这个空中楼阁。

position:fixed定位时 “高度坍塌” 问题的解决的更多相关文章

  1. 唤醒键盘时取消对特定类的position:fixed定位

    /* 唤起键盘时取消对特定类的position:fixed定位 */ var windheight = $(window).height(); /*未唤起键盘时当前窗口高度*/ $(window).r ...

  2. 关于苹果手机微信端 position: fixed定位top导航栏问题

    在移动端,position: fixed定位一般不被识别,或者在ios系统中,获取input焦点时,会导致position: fixed的top失效,下面是我验证过的方法,大家可以试试.<!do ...

  3. IE11下使用fixed定位时鼠标滚动不平滑

    很久不用IE了,近期做兼容性测试发现一个fixed定位的问题,当元素使用fixed定位时,其应该不随页面滚动,在chrome/firefox/edge下都很完美,元素完全不动,但是使用IE11时,如果 ...

  4. ie7中position:fixed定位后导致margin:0 auto;无效

    布局网页时,需要把header固定在上方.直接使用position:fixed;现代浏览器以及ie8以上均正常显示,但是ie7中,header里面的子元素设置的水平居中并没有效果.做了各种尝试,都没有 ...

  5. iOS后台定位时授权提示一闪而过的解决办法

    今天做后台定位时,授权提示"允许 XXX 在您并未使用该应用时范文您的位置吗?"总是一闪而过,点不到,或者压根就不弹出.后来找到了解决问题的方法,那就是:将CLLocationMa ...

  6. ios设备触发虚拟键盘输入后position:fixed 无效的一些简单另类的解决方法。

    首先看一下我要解决的问题,第一张图是正常的情况下,第二张图是点击了输入框之后的情况,就是要解决此问题~! 百度了一下解决方法,好像有以下的一些方法: 1. iscroll 2. Jquery Mobi ...

  7. 关于canvas画布使用fillRect()时高度出现双倍效果解决办法

    当设置canvas的宽度和高度时,只有内嵌css有效,外部css会出现拉伸的情况,例如: <!DOCTYPE html> <html lang="en"> ...

  8. CSS高度坍塌原因及解决办法

    在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷.由于父 ...

  9. 父节点使用css的transform: translate(0, 0)时position:fixed在chrome浏览器中无效

    今天在做移动端的页面,无意间发现了一个Chrome浏览器下的一个bug,在使用CSS3的transform: translate(0, 0)属性对节点A进行位置转化,此时A节点下面有一个字节点B,节点 ...

随机推荐

  1. LINQ对List列表随机排序,取N条数据

    List<Art_Search> artList=new List<Art_Search>(); artList=artList.OrderBy(s => Guid.Ne ...

  2. intent.setFlags方法中参数值的含义

    intent.setFlags()方法中参数的含义 1.FLAG_ACTIVITY_NEW_TASK: 例如现在栈一的情况是:A    B   C(C位于栈顶),C通过intent跳转到D,并且这个I ...

  3. phpcms v9为联动菜单字段添加验证提醒功能 解决标题不能为空

    v9系统中,如果你在模型中添加了联动菜单字段就算你在字段设置中设置了最小值为1,提交内容之前你不选择联动菜单中的值,也不会出现类似类似“标题不能为空”这样的提示下面提供解决办法打开phpcms\lib ...

  4. IE6浏览器兼容问题及部分解决方案(网上整理)

    作为一个初涉前端技术的IT菜鸟,IE浏览器的兼容问题是一个不得不跨越的坎.为了能够在不同浏览器达到同样的显示效果,就不得不花心思想出办法实现兼容.由于各大主流浏览器内核不同,各自的实现标准有所差异,因 ...

  5. PHP浮点数的一个常见问题的解答

    作者: Laruence 本文地址: http://www.laruence.com/2013/03/26/2884.html 转载请注明出处 关于PHP的浮点数, 我之前写过一篇文章: 关于PHP浮 ...

  6. ssh 文件传输

    在linux下一般用scp这个命令来通过ssh传输文件. 1.从服务器上下载文件scp username@servername:/path/filename /var/www/local_dir(本地 ...

  7. Altium Designer(Protel)网络连接方式Port和Net Label详解

    1.图纸结构      图纸包括两种结构关系: 一种是层次式图纸,该连接关系是纵向的,也就是某一层次的图纸只能和相邻的上级或下级有关系:另一种是扁平式图纸,该连接关系是横向的,任何两张图纸之间都可以建 ...

  8. WIN7下关闭驱动数字签名检查的方法

    内容是转的,最后一步貌似没什么用处,水印是去不掉的,不过也无所谓,关键是驱动能用了,要不完全瞎了 实测win7 32位旗舰版可用   ================================= ...

  9. 【HDOJ】4515 小Q系列故事——世界上最遥远的距离

    简单题目,先把时间都归到整年,然后再计算.同时为了防止减法出现xx月00日的情况,需要将d先多增加1,再恢复回来. #include <cstdio> #include <cstri ...

  10. BZOJ3392: [Usaco2005 Feb]Part Acquisition 交易

    3392: [Usaco2005 Feb]Part Acquisition 交易 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 26  Solved:  ...