Я создаю веб-сайт, на котором минимальная высота страницы составляет 200vh. У меня есть изображение всей страницы, а под ним - текст. Я хочу, чтобы текст не выходил за пределы контейнера. Вот пример:

* {
  margin: 0;
  padding: 0;
}

.container {
  position: absolute;
  width: 100%;
  min-height: 200vh;
  background: red;
}

.full-page-image {
  background-image: url("https://i.ytimg.com/vi/xC5n8f0fTeE/maxresdefault.jpg");
  background-size: cover;
  position: absolute;
  height: 100vh;
  width: 100%;
}

.content {
  position: relative;
  top: 100vh;
  left: 10vw;
  width: 80vw;
}

.content p {
font-size: 1.4em;
}
<div class="container">
  <div class="full-page-image">
  </div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum leo at hendrerit pulvinar. Integer non lacus dapibus, dictum ipsum sed, gravida erat. Quisque fermentum fermentum arcu, ac sollicitudin est. Mauris nec pulvinar mi, eu eleifend nisi. Cras lorem ligula, condimentum eget dictum quis, dapibus et est. Quisque tincidunt libero sit amet odio tincidunt, quis bibendum neque malesuada. Proin elementum nulla diam, ac porta est sodales at. Cras ac tortor in odio scelerisque scelerisque. Vestibulum eu ligula semper, lacinia purus ac, auctor orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Vestibulum aliquam nisi ligula, scelerisque imperdiet ante consequat ut. Proin est dolor, egestas a sapien vitae, ultricies euismod ex. Nam eget euismod ante. Praesent finibus sed nisi tincidunt pretium. Vestibulum porta laoreet sapien, et congue odio posuere eu. Proin nec lectus vel libero vestibulum tincidunt. In dapibus a nisl eu imperdiet. Donec faucibus odio a metus sagittis, et vulputate dui dapibus. Etiam non ex libero. Duis ultricies dignissim nulla, in mollis sem condimentum vitae. Etiam tincidunt sed dolor vitae venenatis. Maecenas volutpat felis eu vehicula pharetra. Donec a turpis lacus. Aenean tortor justo, iaculis ut erat eu, rhoncus sagittis elit. Nullam non sapien purus. In at consectetur augue, sit amet mollis justo.

Suspendisse feugiat quam vitae massa tempor luctus. Duis aliquam commodo dolor et commodo. Aenean sit amet nisl vitae quam tincidunt molestie id ac enim. Fusce eu ante imperdiet, viverra lacus at, efficitur risus. Vestibulum placerat, libero quis luctus faucibus, diam nisl tempor justo, eu tempus mauris ligula in libero. Pellentesque ut odio quis orci interdum gravida vitae ut neque. In hac habitasse platea dictumst. Ut finibus mi vitae enim euismod auctor. Integer libero dui, laoreet vel euismod vitae, eleifend mattis urna. Praesent convallis sodales elit, vel elementum purus dapibus nec. Curabitur euismod ullamcorper dolor, a egestas nibh porttitor rhoncus. Nam elementum bibendum elementum.

Fusce non nibh quis odio tempor lobortis ut et lorem. Quisque volutpat dapibus mauris, vitae varius ipsum sollicitudin malesuada. Etiam ultricies sapien tortor, et vehicula ipsum volutpat sollicitudin. Nulla id nisl nunc. Sed sit amet iaculis lacus. Nulla egestas ex purus, eget elementum nibh molestie et. Vivamus sodales rhoncus varius. Donec malesuada, quam et pharetra aliquet, odio erat gravida nunc, nec vehicula tellus diam in purus. Curabitur feugiat tempor nulla, euismod ornare lorem consequat at. Nam rutrum arcu porta nulla convallis viverra. Mauris pharetra velit arcu, ac placerat quam ornare ut. Morbi vitae diam quis turpis fringilla ornare at in urna. Nulla elit lectus, molestie sit amet risus nec, pretium vehicula diam. Morbi velit massa, accumsan eget iaculis eget, pharetra at ex. Duis purus eros, iaculis nec enim at, dignissim pellentesque purus. Nulla convallis, erat quis elementum posuere, metus libero malesuada erat, eu pharetra mauris libero id lacus.

Curabitur placerat accumsan hendrerit. Proin vel mauris eget justo fringilla volutpat eget a libero. Nullam iaculis varius fringilla. Morbi in urna mi. Pellentesque sit amet lacinia odio. Nunc vel dolor aliquet, vulputate magna non, consequat purus. Mauris non malesuada est, nec congue ante. Sed sit amet vestibulum nunc, id hendrerit urna. Ut porta eget risus a tincidunt. Aliquam ut dui elit. Nulla quis varius sapien, vulputate auctor mi. Phasellus rhoncus vestibulum purus, vestibulum porttitor libero mattis in. Aenean elit velit, ultrices in lacinia et, lobortis id tortor. Quisque dapibus cursus lorem, et consequat tellus pretium eu. Maecenas vitae magna bibendum mi placerat pellentesque.
    </p>
  </div>
</div>

Как я могу предотвратить выход текста за пределы красного фона?

0
JakAttk123 12 Мар 2018 в 20:44

2 ответа

Лучший ответ

Вы можете предотвратить переполнение контейнера текстом, 1. развернув контейнер по размеру текста или 2. спрятав переполненный текст за пределами контейнера.

1:
а. В вашем случае использование top: 100vh не изменит высоту элемента, но подтолкнет весь элемент вниз на 100vh. Поэтому он переполняет родительский / контейнерный элемент (красный фон) на 100vh. Текст внутри этого элемента будет доходить до самого низа, также переполняясь на 100vh. Вместо этого используйте margin-top: 100vh, чтобы элемент начинался на 100vh сверху, но заканчивался внутри родительского элемента.

2:
а. Убедитесь, что емкость имеет желаемую высоту. Используйте инструменты разработчика, чтобы просмотреть / выделить высоту элемента.
б. Установите overflow: scroll; или overflow: hidden; см. переполнение css. Это скроет текст за пределами контейнера, с полосами прокрутки или без них. Примечание: overflow: auto не будет (не должен) отображать полосы прокрутки, если нет переполнения.

1
George 12 Мар 2018 в 18:07

Совершенно уверен, что это то, что вы ищете:

.container {
  position: absolute;
  width: 100%;
  min-height: 200vh;
  overflow-y: auto;
  background: red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

0
Maxwelll 12 Мар 2018 в 17:47