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>
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;
}
Html
<div class="col2" onscroll="OnScroll(this)">!Stuff</div>
javascript function
function OnScroll(div) {
var div1 = document.getElementById("col1");
div1.scrollTop = div.scrollTop;}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With