setting div to height: 100% makes scrollbar disabled

Question

I have the following code where I want to make the 2 div tags take up all the available height the browser offers.

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style>
        .container {
            display: flex;
            flex-direction: row;
        }
        .left {
            height: 100%;
            display: block;
            width: 50%;
            background-color: green;
            overflow-y: scroll;
        }
        .right {
            height: 100%;
            background-color: red;
            display: block;
            width: 50%;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            Text
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            Text
        </div>
        <div class="right">
            Text
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            Text
        </div>
    </div>
</body>
</html>

I have decided to do this setting height:100%, but this disables the individual scrollbars of the divs - does anyone know how to make the scrollbars work and having the divs take up the height of the browser? (I don't want to hardcode something like height: 700px)

score 1 · Accepted Answer · answered Mar 29 '20 at 02:13

I'm assuming that by "take up all the available height the browser offers" you mean you want the divs to take up 100% of the viewport. The reason this is not happening in your code is that you have only set the height of the divs to 100%. This means they will take up the full height of their parent element, .container, but you have not set the height of that element (or the height of its parent, body, or the height of its parent, html). You need to set the height of all three of those elements.

In addition, I would explicitly set the margin on body. If you do not, then it defaults to 8px in Firefox, Chrome, and Edge, but it may default to some other number in older versions or other browsers. If you set the margin to 0, then for html and body you can set the height to 100%. If you want the margin of body to be 8px or some other non-zero number, then you need to account for that in the height of html and body. (e.g. height: calc(100% - 8px).

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style>
        html, body {
            height: 100%;
        }
        body {
            margin: 0;
        }
        .container {
            display: flex;
            flex-direction: row;
            height: 100%;
        }
        .left {
            height: 100%;
            display: block;
            width: 50%;
            background-color: green;
            overflow-y: scroll;
        }
        .right {
            height: 100%;
            background-color: red;
            display: block;
            width: 50%;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            Text
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            Text
        </div>
        <div class="right">
            Text
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            Text
        </div>
    </div>
</body>
</html>

looks good cheers - just one thing though, is it possible to retain the normal scrollbar that would scroll through both div tags? — user11508332, Mar 29 '20 at 02:25
I'm not sure I understand. Do you want there to be scrollbars on the individual divs AND a scrollbar on the entire document? Or do you just want there to be a scrollbar on the document? — Johnny Tisdale, Mar 29 '20 at 02:37
scrollbars on the individual divs and a scrollbar on the entire document — user11508332, Mar 29 '20 at 02:47
It kind of seems like those are mutually exclusive, no? If you can scroll both the divs with the normal scrollbar, then why would the individual divs also need scrollbars? I must not understand what you are looking for. Please try to explain as clearly and precisely as possible. — Johnny Tisdale, Mar 29 '20 at 02:59
so each div tag can be scrolled individually, or if the user desires, they can scroll both at the same time — user11508332, Mar 29 '20 at 03:03
I don't believe that can be done with pure CSS. That's simply not the default behavior of scrollbars. I'm not saying it's impossible, but it will probably require some JavaScript. [This answer](https://stackoverflow.com/questions/9236314/how-do-i-synchronize-the-scroll-position-of-two-divs) might be a good starting point. — Johnny Tisdale, Mar 29 '20 at 03:13

setting div to height: 100% makes scrollbar disabled

1 Answers1