欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

左侧滚动无滚动条

程序员文章站 2022-04-18 18:37:27
...

在左右分栏中，当左侧的过长的时候，如果position是fixed的时候就不会滚动，

<style type="text/css">
    .left{position: fixed;width: 200px; background: gray;top: 0;bottom:0;height: 100%;overflow-x: hidden;}
    .content-border{overflow-x: hidden;width: 220px;height: 100%}
    .left-content{width: 200px;}
    .part1{width: 200px;height: 100px;background: red;border:1px solid green;}
</style>
<body>
<div class="left">
<div class="content-border">
  <div class="left-content">
    <div class="part1">1</div>
    <div class="part1">2</div>
    <div class="part1">3</div>
    <div class="part1">4</div>
    <div class="part1">5</div>
    <div class="part1">6</div>
    <div class="part1">7</div>
    <div class="part1">8</div>
    <div class="part1">9</div>
    <div class="part1">12</div>
    <div class="part1">11</div>
    <div class="part1">14</div>
   </div>   
   </div>   
</div>

主要是外面的content-border 他的3个属性缺一不可，然后最外层的overflow-x:hidden也是需要的,结果实现了左侧的无滚动条滚动

上一篇： iframe无滚动条，内容可滚动

下一篇： 【Python】用户登陆相关

推荐阅读