1013: 防水堤坝_当堤坝断裂时：网页溢出问题的解决方案

1013: 防水堤坝

After unexpected gaps in pages, perhaps the most common layout problem is content overflow. Thankfully, there are just a few common causes of this problem, and some well-established solutions:

在页面出现意外间隔之后，最常见的布局问题可能是内容溢出。 值得庆幸的是，此问题只有一些常见原因，还有一些完善的解决方案：

溢出原因1：容器的高度已设置 (Overflow Cause 1: A Container with a Set Height)

The most common problem I see with my students is setting a height on container elements. For example:

我和学生一起看到的最常见的问题是在容器元素上设置高度 。 例如：

<aside>
<p>Now, cryin wont help you, prayin wont do you no good,<br>
When the levee breaks, mama, you got to move.
</aside>

And in the CSS:

在CSS中：

aside { 
    display: inline-block;
    border: 1px dotted #000;
    height: 10px;
}

Which produces:

产生：

Figure 1: Content overflow due to a set height

图1：由于设置高度导致内容溢出

The reason is fairly straightforward: by default, containers will automatically be the height of their content. By setting a default height on the element, you are subverting this rule. The other relevant rule is that browsers will always show content that overflows by default. Thus, you get the result shown in Figure 1.

原因很简单：默认情况下， 容器将自动成为其内容的高度 。 通过在元素上设置默认高度，您正在颠覆此规则。 另一个相关规则是， 浏览器将始终显示默认情况下溢出的内容 。 因此，您得到的结果如图1所示。

治疗： (Treatment:)

There are several possible solutions:

有几种可能的解决方案：

1. Remove the height from the container’s CSS, and let the element find its own natural height from its content.

   从容器CSS中删除height ，然后让元素从其内容中找到其自身的自然高度。

2. Remove the border (or background) from the element: no border, no visual overflow! *

   从元素中删除border (或background )：无边框，无视觉溢出！ *

Setting overflow: scroll-y on the container is almost never a solution: having a scrolling window inside another scrolling window (the browser) is a recipe for user confusion and frustration).

设置overflow: scroll-y在容器上overflow: scroll-y几乎永远不是解决方案：在另一个滚动窗口(浏览器)中包含一个滚动窗口会导致用户感到困惑和沮丧。

溢出原因2：图像太宽 (Overflow Cause 2: A Too-Wide Image)

An image placed on a web page will appear at its natural width: for a bitmap, this means the image’s horizontal pixel count; for an SVG, the value of its predefined height and width attributes. This causes overflow in any element that is too small to contain it, as shown in Figure 2.

放置在网页上的图像将以其自然宽度显示：对于位图，这意味着图像的水平像素数； 对于SVG ，其预定义的height和width属性的值。 这会导致任何太小而无法容纳它的元素溢出，如图2所示。

Figure 2: An image overflowing its container horizontally

图2：图像水平溢出其容器

解 (Solution)

The solution is almost always the same: provide a percentage width for the image in CSS:

解决方案几乎总是相同的：在CSS中为图像提供百分比宽度：

img { width: 100%; }

This will make the image always fit its responsive parent.

这将使图像始终适合其响应父级。

You can find more information about these techniques in my Fluid Images and SVG Images articles; you should also consider picture and srcset for responsive bitmap images.

您可以在我的Fluid Images和SVG Images文章中找到有关这些技术的更多信息。 您还应该考虑将picture和srcset用于响应性位图图像。

溢出原因3：具有百分比宽度的容器 (Overflow Cause 3: A Container with Percentage Width)

A problem that is increasingly common in the age of responsive design: an element containing text is given a percentage width:

在响应式设计时代，这个问题越来越普遍：包含文本的元素具有一定的百分比宽度：

aside {
    width: 20%;
}

Figure 3: Text overflowing its container horizontally

图3：文本水平溢出其容器

This element will narrow with the viewport. Left untreated, longer words will eventually overflow the horizontal edge, as shown in Figure 3.

该元素将随着视口缩小。 如果不加以处理，较长的单词最终将溢出水平边缘，如图3所示。

(Images in this scenario will be taken care of by the solutions provided for Cause 2)

(此情况下的图像将由原因2提供的解决方案处理)

治疗方法 (Treatments)

There are three possible solutions:

有三种可能的解决方案：

1. Place a min-width on the parent element, creating a lock at the lower viewport widths. However, that usually only takes you half-way.

   在父元素上放置一个min-width ，在较低的视口宽度上创建一个锁。 但是，这通常只需要您半途而废。

2. Engage hyphenation in an @media query. This will only cure the problem for especially long text runs; eventually, you’ll need to go for option 3.

   在@media查询中加入 连字符 。 这只能解决特别长的文本问题； 最终，您需要选择选项3。

3. Change the layout to a vertical design, rather than side-by-side; I particularly like to use flexbox for this.

   将布局更改为垂直设计，而不是并排； 我特别喜欢为此使用flexbox 。

溢出原因4：不使用边框 (Overflow Cause 4: Not Using Border-Box)

By default, width in CSS is not what most people assume it is: padding is added to the width of content to produce an overall width, often causing overflow issues.

默认情况下，CSS的width 不是大多数人认为的那样：将padding 添加到内容的宽度以产生整体宽度，通常会导致溢出问题。

解 (Solution)

Engage box-sizing: border-box for most or all elements by default. Doing this at the start of your site development is very important; otherwise, you’ll be building and measuring elements based on a series of incorrect assumptions, and will be forced to change them all later.

启用box-sizing: border-box默认情况下，大多数或所有元素的box-sizing: border-box 。 在网站开发开始时进行此操作非常重要； 否则，您将基于一系列不正确的假设来构建和衡量元素，并将被迫在以后全部更改它们。

溢出原因5：浮动元素 (Overflow Cause 5: Floated Elements)

Floated elements to not contribute to the height of their container. Taking the following as an example:

浮动元素不会增加其容器的高度。 以以下为例：

<div id="levee">
    <img src="chicago.jpg" alt="A photograph of the waterfront 
    of Chicago">
    <p>Thinkin bout me baby and my happy home<br>
    Going, gon to chicago,<br>
    Gon to chicago,<br>
    Sorry but I cant take you.<br>
    Going down, going down now, going down.
    
    <p>Photograph by 
    <a href="https://www.flickr.com/photos/snake_bill/13812951923/">
    Yulin Lu</a>, used under a Creative Coommons 
    Attribution-NonCommercial-NoDerivs 2.0 Generic license.
</div>

With this CSS:

使用此CSS：

#levee {
    border: 2px solid #333;
}
#levee img {
    float: left;
    width: 50%;
    margin: 2rem;
}

Produces what you see in Figure 4:

产生您在图4中看到的内容：

Figure 4: Floated content overflowing its container

图4：浮动内容溢出其容器

治疗 (Treatment)

There are many “clear floats” or “clearfix” solutions for this problem. The simplest solution is extremely effective, but also counter-intuitive: use overflow: hidden on the parent element. In practice, this does the opposite of what you might expect:

有许多针对此问题的“透明浮动”或“ clearfix”解决方案。 最简单的解决方案非常有效，但也违反直觉：使用overflow: hidden在父元素上。 实际上，这与您期望的相反 ：

#levee {
    border: 2px solid #333;
    overflow: hidden;
}

Which fixes the problem completely.

完全解决了问题。

翻译自: https://thenewcode.com/1167/When-The-Levee-Breaks-Solutions-for-Web-Page-Overflow-Issues

1013: 防水堤坝