Как установить div, чтобы использовать определенный процент высоты, при использовании overflow: auto, чтобы поставить полосу прокрутки? - PullRequest
6 голосов
/ 07 декабря 2010

У меня есть следующий код:

div.leftnav {
    overflow: auto ;
    height: 50% ;
}

То, что, когда я устанавливаю большой div этого класса, не работает (он не показывает полосу прокрутки и не изменяет ее размер до 50%, однакоотлично работает, если вместо этого я использую

height: 400px ;

или другое "абсолютное" значение.

1 Ответ

11 голосов
/ 07 декабря 2010

высота будет работать только в том случае, если у родительского элемента также есть инструкция высоты.

Скажем, у вас действительно простая разметка:

<html>
    <body>
        <div class="leftnav">
            really long text
        </div>
    </body>
</html>

Тогда вам подойдет следующий CSS:

div.leftnav {
    overflow: auto ;
    height: 50%;
}
html, body { 
    height:100%;
}

Хотя вам нужно иметь инструкции по высоте. Если на одном из родительских элементов отсутствует инструкция высоты, то 100% ничего не будут значить для div. Если вы не можете получить доступ ко всем элементам вниз по дереву, то вам понадобится родительский элемент с фиксированной высотой:

<div class="leftnav-container">
    <div class="leftnav">
        really long text
    </div>
</div>

Тогда вам нужен этот css:

div.leftnav {
    overflow: auto ;
    height: 50%;
}
div.leftnav-container {
    height : 500px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...