使两个div共享同一个滚动条？ [英] Make two divs share the same scrollbar?

问题描述

给出两个div，它们表示嵌入较大div中的列。如果！stuff html表示多行数据会超出容器的高度，我该如何设置它，以便两个col div溢出并共享容器中的一个滚动条？

Given two divs that represent columns embedded in a larger div. If the "!stuff" html represents many rows of data that would exceed the height of container, how do I set it up so the two col div's will overflow and share one scrollbar from "container"?

.container {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    padding-bottom: 30px;   
}

.col1 {
    height: 100%;
    width: 50%;
    overflow-x: hidden;
    overflow-y: visible;
    position: relative;
    float: left;
}

.col2 {
    height: 100%;
    width: 50%;
    overflow-x: hidden;
    overflow-y: visible;
    position: relative;
    float: right;
}

<div class="container">
  <div class="col1">
    !Stuff<br/>
  </div>

  <div class="col2">
    !Stuff
  </div>
</div>

推荐答案

您需要为容器设置固定高度，否则，它将自动调整大小，以使列div适合内部。 overflow 属性仅应为容器设置，因为它是唯一要滚动的元素：

You need to set a fixed height for the container, otherwise it will be automatically resized so that the column divs fit inside. The overflow property should only be set for the container, as it is the only element that will be scrolled:

.container {
    height: 300px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    padding-bottom: 30px;   
}

.col1 {
    height: 100%;
    width: 50%;
    position: relative;
    float: left;
}

.col2 {
    height: 100%;
    width: 50%;
    position: relative;
    float: right;
}

这篇关于使两个div共享同一个滚动条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！