HTML Контент, переполняющий страницу - PullRequest
Новая
       7

HTML Контент, переполняющий страницу

1 голос
/ 28 мая 2020

Я работаю над небольшим сайтом, и я столкнулся с проблемой, когда содержимое моего сайта выходит за пределы страницы примерно на 100 пикселей.

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

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

Это может быть изображение, которое я использую на своем сайте (которое я не могу разместить здесь), но, может быть, оно слишком широкое? Я не уверен, почему контент внезапно переполняется. Спасибо за любую помощь! 

.body
{
  width: 100%;
}

.flex-wrapper
{
  display: flex;
}

.image_div
{
  flex: 1;
}

.text_div
{
  flex: 1;
}

#image
{
  width: 90%;
}
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<div class="flex-wrapper">
<div class="image_div">
<img src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" id="image">
</div>

<div class="text_div">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>

</body>

Ответы [ 2 ]

1 голос
/ 28 мая 2020

Во-первых, вы должны удалить эту точку в .body { и оставить только body {, поскольку, если вы поместите .body, вы передадите css классу тела, и вы не используете какой-либо класс с именем body и о том, что у вас есть полоса прокрутки на оси y.

Я думаю, вы могли бы использовать размеры области просмотра, настроить свой div на свой экран и скрыть переполнение на y, но чтобы вам было легче понять, проверьте код ниже 

body
{
  width: 100%;
  max-height:100%;
  overflow-y:hidden;
  overflow-x:scroll;
}

.flex-wrapper
{
  display: flex;
  height:80vh;
}

.image_div
{
  flex: 1;
}

.text_div
{
  flex: 1;
  height:70%;
}

#image
{
  width: 70%;
height:70%;
}
<body>
<div style="height:20vh;"><p style="height:80%;overflow:auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

<div class="flex-wrapper">
<div class="image_div">
<img src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" id="image">
</div>

<div class="text_div">
<p style="height:50%;overflow:auto;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>

</body>

ПРИМЕЧАНИЕ. Работа области просмотра - это процент от вашего экрана, при этом я имею в виду, что вам нужно разделить экран до достижения 100, в примере я дал вам верхний абзац занимает 40% экрана, а изображение и другой текст занимают 60% экрана

Надеюсь, это поможет

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

попробуйте это 

#img {
    width: 90%;
    max-width: 90%;
    height: auto; 
}

или 

.flex-wrapper
{
  display: flex;
  max-width: 100%;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...