Menu
I have 2 divs next to each other in one row. I want the user to scroll them vertically separated when the content overflows the div and I also want to use the full height of the current browser window.
Here with a fixed height of 700px:
But when i use
height:auto;
or
height:100%;
there is no separate scrolling. (the grey div has a lot of more text down) it only has the main scroll and looks like:
Here the full code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
</head>
<style type="text/css">
html,body{
margin:0;
padding:0
}
#maintest {
float:left;
display:block;
overflow-y:auto;
height:100%;
width:700px;
background-color:grey;
}
#discussion {
float:none;
display:block;
overflow:auto;
height:100%;
width:auto;
background-color:#B0D1E1;
}
</style>
<body>
<nav>
<a href="test">testlink</a>
</nav>
<div id="maintest">
<?php include "text.html" ?>
</div>
<div id="discussion">
<?php include "text.html" ?>
</div>
</body>
</html>
677
To get the height of the scroll bar the offsetHeight of div is subtracted from the clientHeight of div. OffsetHeight = Height of an element + Scrollbar Height. ClientHeight = Height of an element. Height of scrollbar = offsetHeight – clientHeight.
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
To fit all the text inside the div, the single-direction scrolling method will be used. You can apply it by placing the overflow-y:scroll in the id growth inside the style tag. Notice the scroll bar on the right side of the div .
You should use viewport units instead of direct percentages:
.column {
height: 100vh; /* percent relative to viewport height */
width: 50%;
float: left;
overflow: scroll;
}
Here's a working example of what you're trying to accomplish.
186
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
