HTML 内容溢出页面

Question

我在一个小网站上工作，我遇到了一个问题，我的网站内容溢出页面约 100 像素。

我希望我的内容不会溢出，用户必须始终向右滚动才能看到所有内容。

我在这里包含了一段代码，用来重现这个问题。我试过使用溢出属性但它似乎并没有改变我的结果。

这可能是我在我的网站上使用的图片（我不能在此处 post），但也许那太宽了？我不确定为什么内容会突然溢出。感谢您的帮助！

.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>

Answer 1

试试这个

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

或

.flex-wrapper
{
  display: flex;
  max-width: 100%;
}

Answer 2

首先，你应该删除 .body { 中的那个点，只保留 body {，因为如果你把 .body 放在 css 30=] 并且您没有使用任何 class 命名主体，并且您在 y 轴上有一个滚动条。

我想你可以使用视口尺寸，调整你的 div 到你的屏幕和 hide 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>

注意：视口工作是你屏幕的百分比，我的意思是你必须 divide 你的屏幕直到达到 100，在我给你的例子中，最上面的段落有 40屏幕的 %，图像和其他文本占屏幕的 60%

希望对您有所帮助

HTML 内容溢出页面

HTML Content Overflowing the Page

html

css

responsive-design