установка div в высоту: 100% отключает полосу прокрутки - PullRequest
Новая
       39

установка div в высоту: 100% отключает полосу прокрутки

0 голосов
/ 29 марта 2020

У меня есть следующий код, в котором я хочу, чтобы теги 2 div занимали всю доступную высоту, предлагаемую браузером. 

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

Я решил сделать эту настройку height: 100%, но это отключает отдельные полосы прокрутки элементов div - кто-нибудь знает, как заставить полосы прокрутки работать, и когда элементы div занимают высоту браузера? (Я не хочу жестко кодировать что-то вроде height: 700px)

1 Ответ

1 голос
/ 29 марта 2020

Я предполагаю, что под «поднимать всю доступную высоту, которую предлагает браузер», вы подразумеваете, что вы хотите, чтобы div s занимал 100% области просмотра. Причина, по которой этого не происходит в вашем коде, заключается в том, что вы установили только высоту div s на 100%. Это означает, что они займут всю высоту своего родительского элемента, .container, но вы не установили высоту этого элемента (или высоту его родительского элемента, body, или высоту его родительского элемента, html ). Вам необходимо установить высоту всех этих трех элементов.

Кроме того, я бы явно установил поле на body. Если вы этого не сделаете, то по умолчанию это 8px в Firefox, Chrome и Edge, но по умолчанию это может быть какой-то другой номер в более старых версиях или других браузерах. Если вы установите поле на 0, то для html и body вы можете установить высоту на 100%. Если вы хотите, чтобы поле body составляло 8px или какое-либо другое ненулевое число, вам необходимо учесть это в высотах html и body. (например, 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>
...