Question

我在左边的一个页面上有两个div，另一个在右边。右边的div有许多动态生成的标签，所以这个div下面有一个水平滚动条（overflow：auto）。现在这个div的高度超过了可见页面。所以右边有一个垂直滚动条。所以用户必须滚动到页面底部以获得水平滚动条...所以我想要的是滚动条浮动在屏幕的底部而不是页面，这样用户可以随时可以访问水平滚动条。

Answer 1

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

Answer 2

＆＃13;

// 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.

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: