Как заставить CSS-сетку иметь определенную высоту
Я нашел этот вопрос: Как установить максимальную высоту для CSS-сетки, в котором говорится об установке определенной высоты для элементов сетки. Тем не менее, я хочу установить высоту самой сетки и сделать так, чтобы любые элементы были переполнены, чтобы появилась полоса прокрутки (см. Рисунок ниже).
Несмотря на то, что я установил max-height для элемента контейнера, большой текст (.top) все равно выходит за пределы и делает высоту элемента контейнера больше, чем его max-height. И поскольку я не знаю размера элемента .bottom (его высота - auto), я не могу установить max-height для элемента .top.
.container {
padding: 5px;
width: 200px;
max-height: 200px;
grid-template: 1fr auto / 1fr;
grid-template-areas: "top" "bottom";
background: red;
}
.top {
background: blue;
grid-area: top;
}
.bottom {
background: green;
grid-area: bottom;
}<div class = "container">
<div class = "top">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque blandit ipsum vitae vehicula. Vestibulum id urna ac odio scelerisque venenatis. Mauris blandit vitae tortor ac auctor. Donec pharetra accumsan eleifend. Fusce porta ante at turpis venenatis, sed luctus mi efficitur. Nunc eget metus pellentesque ante lacinia facilisis. Aenean magna nisi, feugiat at ullamcorper a, tincidunt id augue. Curabitur ut nisl eu risus convallis luctus et vitae enim. Ut vitae purus sed enim tempus convallis. Vestibulum consequat scelerisque ornare.</p>
<p>Sed at urna turpis. Aenean vehicula, nunc elementum vehicula rutrum, sem orci ornare mauris, auctor ultricies quam enim quis sem. Praesent accumsan volutpat mollis. Proin tempus rhoncus lacus. Cras gravida, mauris sed suscipit vulputate, odio elit sagittis urna, non suscipit odio sapien eget ex. Ut vulputate ante sit amet diam tempus, eget tempus dolor sodales. Etiam quis orci posuere, interdum diam quis, tincidunt urna. Vivamus lectus lectus, hendrerit in sapien quis, tempor sollicitudin sem. Proin quis sem lectus. Fusce quis molestie enim, quis dapibus lacus. Nulla fringilla metus a odio lacinia feugiat. Vivamus rutrum diam placerat tristique scelerisque. Integer a iaculis justo, a tempus lorem.</p>
</div>
<div class = "bottom">
<p>Little Text</p>
</div>
</div>Так как же добиться сетки с определенной высотой и иметь слишком большие элементы с полосой прокрутки?
В замешательстве, изображение, которое вы добавили в свой вопрос, не отражает результат ответа, который вы отметили как решение. Хотя это не может быть копирование и вставка кода из предоставленной вами ссылки, существует более одного способа, так сказать, снять шкуру с кошки.
Да, точно. Изображение показывает то, что я хочу, код показывает, что у меня есть
Тем не менее, я хочу установить высоту самой сетки и сделать так, чтобы любые элементы были переполнены, чтобы появилась полоса прокрутки (см. Рисунок ниже). Это то, что вы заявили? Представленное вами изображение или фигура воспроизведены в отличие от ответа, который вы отметили как правильный
Это был быстрый макет, но если вы проигнорируете какие-либо поля / отступы, это будет точно так, как показывает принятый ответ.
Хорошо, не волнуйтесь.
Ответы 1
Вы забыли установить display: grid на контейнере и overflow: auto вверху:
.container {
padding: 5px;
width: 200px;
max-height: 200px;
grid-template: 1fr auto / 1fr;
grid-template-areas: "top" "bottom";
background: red;
display: grid; /* added */
}
.top {
background: blue;
grid-area: top;
overflow: auto; /* added */
}
.bottom {
background: green;
grid-area: bottom;
}<div class = "container">
<div class = "top">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque blandit ipsum vitae vehicula. Vestibulum id urna ac odio scelerisque venenatis. Mauris blandit vitae tortor ac auctor. Donec pharetra accumsan eleifend. Fusce porta ante at turpis venenatis, sed luctus mi efficitur. Nunc eget metus pellentesque ante lacinia facilisis. Aenean magna nisi, feugiat at ullamcorper a, tincidunt id augue. Curabitur ut nisl eu risus convallis luctus et vitae enim. Ut vitae purus sed enim tempus convallis. Vestibulum consequat scelerisque ornare.</p>
<p>Sed at urna turpis. Aenean vehicula, nunc elementum vehicula rutrum, sem orci ornare mauris, auctor ultricies quam enim quis sem. Praesent accumsan volutpat mollis. Proin tempus rhoncus lacus. Cras gravida, mauris sed suscipit vulputate, odio elit sagittis urna, non suscipit odio sapien eget ex. Ut vulputate ante sit amet diam tempus, eget tempus dolor sodales. Etiam quis orci posuere, interdum diam quis, tincidunt urna. Vivamus lectus lectus, hendrerit in sapien quis, tempor sollicitudin sem. Proin quis sem lectus. Fusce quis molestie enim, quis dapibus lacus. Nulla fringilla metus a odio lacinia feugiat. Vivamus rutrum diam placerat tristique scelerisque. Integer a iaculis justo, a tempus lorem.</p>
</div>
<div class = "bottom">
<p>Little Text</p>
</div>
</div>Хм, очень интересно. Я действительно забыл об этом в моем примере, но в моем реальном коде это тоже не сработало.
Трудно сказать, в чем проблема с вашим настоящим кодом .... Может, какая-то опечатка?
Да, сейчас я выбрал совершенно другой подход, так что это не имеет значения :)
Решено с помощью Javascript