美文网首页
滚动条挤占内容宽度,影响布局

滚动条挤占内容宽度,影响布局

作者: 晨曦_f83d | 来源:发表于2020-10-22 17:39 被阅读0次

问题: 当容器有一定的高度(设有固定高度或者是最大高度),但是内容高度不确定,有可能会撑开父容器产生滚动条,也有可能不产生。但是因为滚动条出现,滚动条也需要占位置,容器内容宽度就会被挤压

举个栗子:

.body {
  height: 800px;
  width: 420px;
}
.container {
  padding: 20px
  overflow-y: auto;
}
.item {
  width: 90px;
  height: 90px;
  margin-bottom: 10px;
  margin-right: calc(20px / 3); //????这样子设置的有问题
}
.item:nth(4n) {
  margin-right: 0px
}
<div class="body">
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      .......
    </div>   
</div>

没有滚动条的效果图:

image.png

上面为灰色是container灰色块,item为里面的小方块,图为四个一排的列表,当item超过4个,就会超出父元素高度,container就会产生滚动条。要求是灰色容易左右两边留白一样,中间子元素的间距相等。

未产生滚动条container容器的内容宽度是420px - 40px = 380px(父元素的宽度减去左右padding的宽度)。剩余的宽度 380px - 360px = 20px margin-right的值就为 calc(20px / 3)。
但是如果是产生滚动条,内容的宽度要再减去14px, 是366px。如果这样设置margin-right: calc(20px / 3)有滚动条的情况下,第四个元素会挤到第二排。所以item的样式margin-right不能给出固定的值。

解决1. 新属性overlay
chrome下overflow有个新的属性值overlay,这个属性简直就是为了这个问题而生,他和auto有点像,但是区别就是在触发滚动条时候并不挤压空间。但是非常遗憾,这个属性值目前只有chrome支持

.container {
    overflow-y: overlay;
}

看起来的效果像是在滚动条显示padding的空白里,没有挤压到内容区域。

有滚动条的效果:


image.png

解决2. 使用100%
设置100%指的是可用宽度,是不含滚动条的宽度,

.item {
    margin-right: calc((100% - 360px) / 3);
}

这样子设置之后,在有滚动条和滚动条时,margin-right计算的值不同。
有滚动条的效果:


image.png

相关文章

  • 滚动条挤占内容宽度,影响布局

    问题: 当容器有一定的高度(设有固定高度或者是最大高度),但是内容高度不确定,有可能会撑开父容器产生滚动条,也有可...

  • CSS布局

    常见布局(PC) 固定宽度布局简单但是窗口宽度小的时候会出现滚动条 弹性布局(fluid)页面较为美观但是较为复杂...

  • css offsetWidth,clientWidth,scro

    clientWidth: width(内容宽度) + 左右padding - 滚动条宽度; offsetWidth...

  • 9. CSS布局

    常见布局(PC) 固定宽度布局——缺点:屏幕尺寸不够时会出现滚动条。 弹性布局(布局随浏览器变化)——缺点:代码复...

  • 2015-05-26

    IE10以上滚动条会挤占屏幕宽度,其他浏览器都正常,加入下面的样式就ok了 html, body { -ms-ov...

  • 滚动条的样式

    有时候在某些布局上面,内容太多,而范围很小,为了不影响布局,这是我们可能会设置滚动条,如overflow:scro...

  • 解决表格内容因为滚动条导致换行(二)固定表头

    分析:要把表头和内容分开,这样才能做到固定表头,滚动条只作用于内容。通过计算把内容除去滚动条的宽度scrollWi...

  • 当overflow遇到flex

    昨天工作中遇到这么个问题,两栏布局,左边宽度固定,右边自适应而且右边容器中内容超出之后需要横行滚动条,简化出来大概...

  • pc端适配屏幕尺寸

    最小宽度方案 内容部分设置最小宽度,当屏幕小的时候出现滚动条,当屏幕大的时候内容剧中展示。header和foote...

  • CSS vw让overflow:auto页面滚动条出现时不跳动

    一、水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽度,然后ma...

网友评论

      本文标题:滚动条挤占内容宽度,影响布局

      本文链接:https://www.haomeiwen.com/subject/darpmktx.html