Текст превышает размер сетки

/* I have a grid inside another grid. The parent grid is set as follows: */

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 2.409fr 2.409fr 1fr;
  grid-template-rows: 1.5fr 5.5fr 5.5fr 1fr;
  grid-template-areas: 
    "header header sidePanel" 
    "pageContent pageContent sidePanel" 
    "pageContent pageContent sidePanel" 
    "footer footer sidePanel";
}


/* the pageContent class contains another 2x2 grid, with three elements: */

.content {
  grid-area: pageContent;
  background: #d123;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: 
    "content-1 content-2" 
    "content-1 content-3";
}

.header {
  grid-area: header;
}

.footer {
  grid-area: footer;
}

.sidePanel {
  grid-area: sidePanel;
}

.content {
  grid-area: pageContent;
}

.content-1 {
  grid-area: content-1;
}

.content-2 {
  grid-area: content-2;
}

.content-3 {
  grid-area: content-3;
}

<!DOCTYPE html>
<html lang = "en" dir = "ltr">

<head>
  <meta charset = "utf-8">
  <title></title>
  <link rel = "stylesheet" href = "style.css">
</head>

<body>
  <div class = "container">
    <div class = "header">My Header</div>
    <div class = "sidePanel">My sidePanel</div>
    <div class = "content">
      <div class = "content-1">
        <span class = "title">Main Article</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum rem ratione dolorum ducimus quaerat officiis voluptates obcaecati ab illo sequi, blanditiis vel dolore possimus labore asperiores architecto quia nobis accusantium beatae doloremque
          eveniet saepe excepturi laborum exercitationem delectus! Dolor, natus perferendis deleniti sequi veniam. In nemo mollitia dolor ipsam. Ipsa illum delectus eveniet. Explicabo perspiciatis eum distinctio vel quo iure, deleniti tempora dolorem
          facilis iste? Reprehenderit maxime neque porro optio, animi praesentium laboriosam recusandae! Ex nesciunt maxime dicta quo hic placeat laboriosam possimus totam, ab velit iure quisquam assumenda odit adipisci, eos voluptatum at qui sint aperiam
          blanditiis quos. Quos ratione, molestiae possimus repellendus eveniet et temporibus alias sunt perferendis quod odio, quis tenetur natus obcaecati! Doloremque omnis numquam quia.</p>
      </div>
      <div class = "content-2">
        Content 2
      </div>
      <div class = "content-3">
        Content 3
      </div>
    </div>
    <div class = "footer">My Footer</div>

  </div>
</body>

</html>

Моя самая большая трудность - размещение текста. Если я помещаю текст, например, в контент-1 и изменяю размер страницы по высоте, текст перекрывается за нижним колонтитулом, выходит за его сетку и даже сетку контейнера. Есть ли способ подогнать текст к его «области сетки» и соответствующим образом изменить его размер?

без HTML его трудно воспроизвести. Однако самый простой способ исправить это — использовать правило переполнения.

— 26.12.2020 19:38

@tacoshy Я отредактировал вопрос. Пытался прилепить вопрос к фрагментам кода.

— 26.12.2020 19:45

html css

26.12.2020 19:34

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

103

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Ваша проблема в том, что вы устанавливаете «фиксированную» высоту для своих строк. Когда ты говоришь:

grid-template-rows: 1.5fr 5.5fr 5.5fr 1fr;

это означает, что как только доступная высота будет установлена, ваша сетка будет иметь определенную высоту и не будет изменять размер в соответствии с текстом.

Мое предложение состояло бы в том, чтобы просто изменить эту строку. Например, вы можете просто указать фиксированную высоту для верхнего и нижнего колонтитула:

grid-template-rows: 100px auto auto 200px;

есть много причин использовать фиксированную высоту. Особенно, если вы хотите подать в суд на приложения или в сочетании с 100vh, как это делает OP. Однако в этом случае вам нужно добавить правило переполнения, чтобы определенные поля могли прокручивать свое содержимое. Итак, вы видите, что фиксированная высота не является проблемой, и нарушение дизайна, созданного для 100vh, не может рассматриваться как решение.

— 26.12.2020 20:18

26.12.2020 19:59

вам просто нужно добавить правило переполнения. Я только что добавил .content-1 { overflow-y: auto; } к вашему коду, и теперь вы получите полосу прокрутки, если текст выше высоты блока.

body {
  margin: 0;
}

.container {
  box-sizing: border-box;
  display: grid;
  height: 100vh;
  grid-template-columns: 2.409fr 2.409fr 1fr;
  grid-template-rows: 1.5fr 5.5fr 5.5fr 1fr;
  grid-template-areas: 
    "header header sidePanel" 
    "pageContent pageContent sidePanel" 
    "pageContent pageContent sidePanel" 
    "footer footer sidePanel";
}

.content {
  grid-area: pageContent;
  background: #d123;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: 
    "content-1 content-2" 
    "content-1 content-3";
}

.header {
  grid-area: header;
}

.footer {
  grid-area: footer;
}

.sidePanel {
  grid-area: sidePanel;
}

.content {
  grid-area: pageContent;
}

.content-1 {
  grid-area: content-1;
}

.content-2 {
  grid-area: content-2;
}

.content-3 {
  grid-area: content-3;
}

.content-1,
.content-2,
.content-3 {
  overflow-y: auto;
}

<!DOCTYPE html>
<html lang = "en" dir = "ltr">

<head>
  <meta charset = "utf-8">
  <title></title>
  <link rel = "stylesheet" href = "style.css">
</head>

<body>
  <div class = "container">
    <div class = "header">My Header</div>
    <div class = "sidePanel">My sidePanel</div>
    <div class = "content">
      <div class = "content-1">
        <span class = "title">Main Article</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum rem ratione dolorum ducimus quaerat officiis voluptates obcaecati ab illo sequi, blanditiis vel dolore possimus labore asperiores architecto quia nobis accusantium beatae doloremque
          eveniet saepe excepturi laborum exercitationem delectus! Dolor, natus perferendis deleniti sequi veniam. In nemo mollitia dolor ipsam. Ipsa illum delectus eveniet. Explicabo perspiciatis eum distinctio vel quo iure, deleniti tempora dolorem
          facilis iste? Reprehenderit maxime neque porro optio, animi praesentium laboriosam recusandae! Ex nesciunt maxime dicta quo hic placeat laboriosam possimus totam, ab velit iure quisquam assumenda odit adipisci, eos voluptatum at qui sint aperiam
          blanditiis quos. Quos ratione, molestiae possimus repellendus eveniet et temporibus alias sunt perferendis quod odio, quis tenetur natus obcaecati! Doloremque omnis numquam quia.</p>
      </div>
      <div class = "content-2">
        Content 2
      </div>
      <div class = "content-3">
        Content 3
      </div>
    </div>
    <div class = "footer">My Footer</div>

  </div>
</body>

</html>

26.12.2020 20:28

Другие вопросы по теме

CSS DIV торчит из другого DIV

HTML CSS добавить выпадающее меню

Навигация как отдельная страница в PHP

Динамическое изменение цвета кнопки с помощью React

Эффект виньетки изображения CSS

Пиксельное фоновое изображение Firefox div не работает

Моя кнопка HTML не работает. Ничего плохого?

Как выровнять столбцы по горизонтали ИЛИ по вертикали в зависимости от области просмотра в Bootstrap 4?

Разделите класс карты Bootstrap на 3 горизонтальных блока одинакового размера и 2 вертикальных блока

CSS добавить отступ к одному элементу в меню

Текст превышает размер сетки

Ответы 2

Другие вопросы по теме

Похожие вопросы