HTML / CSS Проблема с высотой прокрутки - PullRequest
Новая
       34

HTML / CSS Проблема с высотой прокрутки

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

Учтите это: 

<!DOCTYPE html>
<html>
<style>
    .container{position: fixed; width: 100%;height: 100%; left: 0; top: 0; z-index: 10;background-color: grey}
    .header{height: 50px; width:100%;padding:10px;background-color: lightgrey;}
    .nav{height: 50px; width:100%;padding:10px; background-color: darkgrey}
    .content{height: 100%; width:100%; overflow-y: scroll}
    .item{padding:20px;}
    body {font-size: 32px; font-family: Arial, Helvetica, sans-serif;}
</style>
<body>
    <div class='container'>
        <div class='header'>this is the header</div>
        <div class='nav'>This is the nav</div>
        <div class='content'>
           <div class='item'>I love chips 1</div>
           <div class='item'>I love chips 2</div>
           <div class='item'>I love chips 3</div>
           <div class='item'>I love chips 4</div>
           <div class='item'>I love chips 5</div>
           <div class='item'>I love chips 6</div>
           <div class='item'>I love chips 7</div>
           <div class='item'>I love chips 8</div>
           <div class='item'>I love chips 9</div>
           <div class='item'>I love chips 10</div>
           <div class='item'>I love chips 11</div>
           <div class='item'>I love chips 12</div>
           <div class='item'>I love chips 13</div>
           <div class='item'>I love chips 14</div>
           <div class='item'>I love chips 15</div>
        </div>
     </div>
</body>
</html>

Высота содержимого равна 100%, как и у контейнера. Тем не менее, содержимое в div 'content' не позволяет мне прокручиваться до самого конца. Кажется, что он компенсируется высотой 'header' и 'nav', но он скрыт от нижней части экрана. Я нашел обходной путь, когда я задаю 'content' div some 'padding-bottom' для pu sh резервного копирования контента, однако полоса прокрутки теперь исчезает из нижней части браузера: (

How могу ли я сделать так, чтобы div 'content' имел высоту 100% (я не могу использовать фиксированную высоту, поскольку все это необходимо для заполнения ширины и высоты браузера) и чтобы можно было видеть полосу прокрутки и контент?

спасибо заранее!

Ответы [ 2 ]

0 голосов
/ 03 мая 2020

Вы можете попробовать использовать высоту контейнера = 100vh вместо 100%. введите описание ссылки здесь

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

Так что после долгих испытаний и осмотра я сам нашел ответ! Любой, кто хочет решить ту же проблему, может сделать это следующим способом:

Используя SASS или CSS Переменные устанавливают высоту всех элементов над контейнером прокрутки. Используя cal c, сложите все эти высоты в один итог. Затем, используя эту общую сумму и cal c, вычтите это количество из 100% высоты области просмотра. Что-то вроде ниже 

--header-hold-height: 64px;
--tab-hold-height: 56px;
--filter-hold-height: 64px;
--total-top-nav-height: calc(var(--header-hold-height) +  var(--tab-hold-height) + var(--filter-hold-height));

.scroll-container {
  height: calc(100vh - var(--total-top-nav-height));
  overflow-x: hidden;
  position: relative;
  overflow-y: scroll;
}
...