Question

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


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

Answer 1

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

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

Answer 2

HTML

<div class="col2"  onscroll="OnScroll(this)">!Stuff</div>

javascript功能

function OnScroll(div) {
var div1 = document.getElementById("col1");
div1.scrollTop = div.scrollTop;}

让两个div共享相同的滚动条？

2 个答案: