这篇文章主要介绍了html如何隐藏滚动条,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。html隐藏滚动条的方法:首先创建一个HTML示例文件;然后在body中设置内容区域,并
这篇文章主要介绍了html如何隐藏滚动条,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
html隐藏滚动条的方法:首先创建一个HTML示例文件;然后在body中设置内容区域,并在内容区域外层套一个p;最后设置p的样式为“overflow:hidden”即可。
HTML隐藏滚动条,还带着滚动效果
在不出现滚动条的情况下,头部和内容区域宽度相等,但是内容 区域的内容太多,必须得保留滚动效果,不出现滚动条。
在内容区域外层套一个p,设置p的overflow:hidden样式,把内容区域的宽度设置为 “100% + 20px”;
<p style="width:400px;height:400px;border:1px solid gray"><p style="height:40px;line-height:40px;background-color:yellow;text-align:center">头部</p><p style="height:360px;width:400px;overflow:hidden"> <!-- 内层带滚动效果的p,宽度比父级p宽20px,滚动条被父p隐藏了 --><p style ="height:360px;width:420px;background-color:green;overflow-y:scroll"><p style="border-bottom:1px solid gray">哈哈哈</p><p style="border-bottom:1px solid gray">哈哈哈</p><p style="border-bottom:1px solid gray">哈哈哈</p><p style="border-bottom:1px solid gray">哈哈哈</p><p style="border-bottom:1px solid gray">哈哈哈</p><p style="border-bottom:1px solid gray">哈哈哈</p><p style="border-bottom:1px solid gray">哈哈哈</p><p style="border-bottom:1px solid gray">哈哈哈</p><p style="border-bottom:1px solid gray">哈哈哈</p><p style="border-bottom:1px solid gray">哈哈哈</p><p style="border-bottom:1px solid gray">哈哈哈</p><p style="border-bottom:1px solid gray">哈哈哈</p><p style="border-bottom:1px solid gray">哈哈哈</p><p style="border-bottom:1px solid gray">哈哈哈</p></p></p></p>
感谢你能够认真阅读完这篇文章,希望小编分享的“html如何隐藏滚动条”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网精选频道,更多相关知识等着你来学习!
--结束END--
本文标题: html如何隐藏滚动条
本文链接: https://www.lsjlt.com/news/269848.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0