挪移端页面头部牢固定位的绝对定位实现(代码示例)-
本篇文章给大家带来的内容是对于挪移端页面头部牢固定位的绝对定位实现,有一定的参照 价值,有需要的伴侣可以参照 一下,但愿对你有所帮忙。
在挪移端进行开发时,平常整个页面的头部会牢固一个区域,比方下图淘宝中的头部。这个区域不管怎么划屏都是可见的。在PC端,我们可以运用position:fixed来实现。但是因为position:fixed存在一定的兼容性题目,并且挪移端的视口较多,这个牢固毕竟是相关于哪个视口,很容易搞错。因而,平常都会运用绝对定位来取代牢固定位。下面概括代码举例:
HTML代码如下所示:
CSS代码如下所示:
.header-box{ /*position:fixed;*/ position:absolute; left:0; top:0; width:100%; height:179px; background:#ef3229; } ul>li{ height:350px; border-bottom: 1px solid black; }
上面的html中定义了顶部牢固区域和下方内容区域。顶部运用了position进行了绝对定位,设定了left为0,top为0。内容区域高度超过了可视区。
终究得到的结果如下图所示:
了解了上面两个见识点,那么我们就可以进行剖析了。我们晓得正是因为html元素身上涌现滚动条,正是因为滚动条的滚动才会致使document超出阅读器窗口。因而我们需要第一需要做的是将html的滚动条进行禁用。
html{ overflow:hidden; }
虽然禁用了html的滚动条解决了运用绝对定位取代牢固定位的题目,但是带来了新的题目。那就是整个页面都不再拥有滚动条了。但是事实上我们是需要滚动条的,因而我们可以在body身上增加滚动条。
html{ height:100%; } body{ height:100%; overflow:auto; }
因为需要将body的高度设定为阅读器的高度,而html的高度取决于阅读器高度,因而先设定html高度为阅读器高度,然后body继承自html即可。
因而终究的代码情势是:
html{ height:100%; overflow:hidden; //禁用滚动条,实现相关于document的绝对定位取代牢固定位。 } body{ height:100%; overflow:auto; //增加滚动条 } ul{ margin-top:179px; list-style: none; } .header-box{ /*position:fixed;*/ position:absolute; left:0; top:0; width:100%; height:179px; background:#ef3229; } ul>li{ height:350px; border-bottom: 1px solid black; }
总结:一些用到的相干见识:
html元素和body的元素的绝对定位默许值都是static。因而要是有元素寻不到非static的先人元素,那么是相关于document进行定位的。
html元素和body元素都是块级元素。默许独有一行,其宽度等于阅读器宽度。高度等于内容区域的高度,要是给高度设定了height:100%。那么它的高度是阅读器高度。
html元素默许设定了overflow:auto。在内容超出阅读器高度的时候就会涌现滚动条。
以上就是挪移端页面头部牢固定位的绝对定位实现(代码示例)的细致内容,更多请关注 百分百源码网 其它相干文章!