关于滚动条占位出现的问题

最新推荐文章于 2024-08-08 18:54:52 发布

松鼠陛下

最新推荐文章于 2024-08-08 18:54:52 发布

阅读量3.2k

点赞数

分类专栏：前台 CSS

本文链接：https://blog.csdn.net/songshuguowang/article/details/104752797

版权

当浏览器窗口宽度小于1200px时，页面底部出现的横向滚动条导致页面高度增加，引起走向滚动条。解决方法是在CSS中设置`margin-bottom: calc(100vh - 100%)`，100vh表示包含滚动条的浏览器内部高度，100%表示不含滚动条的宽度。这样在滚动条出现时，可以动态调整margin-bottom为滚动条高度，避免额外的垂直滚动。

摘要由CSDN通过智能技术生成

由于我的网页设置了最小宽度为1200px

当浏览器窗口拖拽到宽度小于1200px时，页面底部出现了横向滚动条

这个滚动条我是需要的，但是滚动条的出现导致页面高度增加，这样走向的滚动条也出来了

解决办法是增加了一个动态的margin-bottom

margin-bottom: calc(100vh - 100%);

100vh代表相对于浏览器的`window.innerHeight`，是浏览器的内部高度，包含滚动条高度

100%是可用宽度，是不含滚动条的宽度。

没有滚动条的时候，相当于margin-bottom:0

出现滚动条的时候，相当于margin-bottom:滚动条高度

.app_bootm{
  flex:1;
  height: calc(100vh - #{$mainBarHeight});  
  display: flex;
  flex-direction: row;
  overflow: auto;
  background: red;
  margin-bottom: calc(100vh - 100%);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>如何避免滚动条出现影响</title>
  <script>
    function myFunction() {
      x = document.getElementById("demo");
      console.dir(x);