如何消除html页面下边和右边的滚动条 | 您所在的位置:网站首页 › 滚动页面英语怎么写出来的 › 如何消除html页面下边和右边的滚动条 |
有时我们在编写HTML文件,运行在浏览器时发现会出现如下的滚动条 出现这种情况的原因是为什么呢?就是我们在设置内容样式时把宽高设置的超过了可视化的宽高,所以才会出现滚动条方便浏览者查看超出部分的内容。而可视化宽、高就是浏览器当前页面的宽高。 消除滚动条的方法有三种,就以上图为例来讲解
1.把溢出内容隐藏起来 style="overflow:Scroll;overflow-y:hidden;overflow-x:hidden"这种方法有一个弊端就是如果页面有内容的话, 会把部分内容隐藏起来 2.先设置body, html 高度为可视化高度,在设置上下两部分占可视化高度的百分比body, html { height:100% ;} .header{ height:20%; background-color: pink }因块级元素默认宽度为可视化宽度,所以在此不设置宽度了 .container{ height:80%; background-color: blueviolet; } 3.使用calc()函数,需要先设置body, html 高度为可视化高度body, html { height:100% ;} .header{ height:100px; background-color: pink; } .container{ height:calc(100% - 100px);注意这里的100%是可视化高度,“-”左右一定要加上空格 background-color: blueviolet; }
|
CopyRight 2018-2019 实验室设备网 版权所有 |