Search code examples
csshtmlscroll

how to scroll 2 divs separately using full height of browser

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:

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:

dynamic height

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

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