Как накапливать несколько DIV на заданной общей высоте, с вертикальной прокруткой на одном DIV (без JS) - PullRequest
0 голосов
/ 05 октября 2019

У меня есть страница из трех частей: 1 часть заголовка, которая должна быть всегда видимой и в верхней части области просмотра, 1 часть содержимого, которая должна быть прокручиваемой, 1 конечная часть, которая должна быть всегда видимой и в нижней части области просмотра.

Я не хочу использовать ни JS, ни Expression. Я нашел много ответов, чтобы сделать это только с помощью CSS, но все предполагают, что высота заголовка и трейлера постоянна и известна, что не мой случай.

Моя идея все еще остается в игрес атрибутами высоты и переполнения в корпусах BODY и DIV, чтобы можно было прокручивать один из DIV с максимально доступной высотой отображения. Но до сих пор не удалось найти рабочее решение.

Я пробовал это (всего 2 части, заголовок и содержимое):

<body style="overflow: hidden; height: 100vh">
<div id="MyHeader"> blablabla </div>
<div id="MyContent" style="overflow: scroll;">
<P>Many lines of content ...</P>
</div>

Я вижу полосу прокрутки v насодержимое DIV, но оно полноразмерно и неэффективно, поэтому я просто не вижу его переполненной части.

Примечание. Если это не правильный способ, я мог бы рассмотреть возможность использования таблицы с 1 столбцом и общей высотойустановлен на 100vh и одна ячейка сделана с v-прокруткой. Но я видел, что это более сложно, и может иметь побочные эффекты в некоторых браузерах ....

Ответы [ 2 ]

0 голосов
/ 06 октября 2019

Это может быть достигнуто с помощью позиции sticky Установите верхний и нижний колонтитулы в положение закрепленного с top: 0 для верхнего и bottom: 0 для нижнего колонтитула.

Вот пример: https://codepen.io/itsashis4u/pen/ZEEEKwq

0 голосов
/ 05 октября 2019

Вы пробовали position:sticky собственность? Я думаю, что это действительно может соответствовать вашему случаю, вот хорошее чтение о позиционировании элементов в документах HTML.

header, footer {position:sticky; background:#ccc}
header {top:0}
footer {bottom:0}
<header>
<H1>Any height header block</H1>
</header>
<article>
<p>I'll be scrollable article</p>
<br><br><br><br><br><br><br><br>
<p>I'll be scrollable article</p>
<br><br><br><br><br><br><br><br>
<p>I'll be scrollable article</p>
<br><br><br><br><br><br><br><br>
<p>I'll be scrollable article</p>
<br><br><br><br><br><br><br><br>
</article>
<footer>
<H2>Any height footer block</H2>
</footer>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...