有时我们在编写HTML文件，运行在浏览器时发现会出现如下的滚动条
出现这种情况的原因是为什么呢？就是我们在设置内容样式时把宽高设置的超过了可视化的宽高，所以才会出现滚动条方便浏览者查看超出部分的内容。而可视化宽、高就是浏览器当前页面的宽高。
消除滚动条的方法有三种，就以上图为例来讲解
<body>
<div class="header"></div>
<div class="container">
</div>
</body>
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;
}
</style>
3.使用calc()函数，需要先设置body, html 高度为可视化高度
body, html { height:100% ;}
.header{
height:100px;
background-color: pink;
}
.container{
height:calc(100% - 100px);注意这里的100%是可视化高度，“-”左右一定要加上空格
background-color: blueviolet;
}
扫一扫
720
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
