如何将水平滚动条始终保持在屏幕底部？

2 回答

• 0

  只需做 body{ overflow-x:scroll;} ，水平滚动条将始终存在 .

  回复于 2024-04-18T23:57:18+08:00
• 0

  // you want something like this. there is no way to manipulate the position of overflow, it is always at the bottom of the div it is in. so if you want the overflow to be at the bottom, you need to put the div at the bottom.
  // Note: You can always use flexbox for faster and easier content alignment. i did not use it here for the sake of others who do not know what flexbox is.
  

  #div1, #div2{
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    padding: 1em;
    margin: 0;
    border: 2px solid;
    
  }
  
  #div1{
    left: 0;
    border-color: red;
  }
  #div2{
    left: 50%;
    border-color: blue;
    overflow-x: scroll;
    white-space: nowrap;
  }
  

  <div id="div1">
  div 1
  </div>
  <div id="div2">
  div 2 (a lot of content)
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni quidem minus autem at doloremque. Delectus perferendis, voluptate consectetur inventore fugit, dolorem ut soluta ullam totam iure, in fugiat quas repellat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni quidem minus autem at doloremque. Delectus perferendis, voluptate consectetur inventore fugit, dolorem ut soluta ullam totam iure, in fugiat quas repellat.
  </div>
  

  回复于 2024-04-18T23:57:18+08:00