案例1：

Question

我有一个div的问题或准确的溢出。我有以下代码：

<div class="overlay" id="Overlay_1">
    <div id="OverlayContent">
        Some content.
    </div>
</div>

类“overlay”只是具有实际的叠加和关闭按钮，所有这些都是用jQuery和一些CSS和jQuery Tools制作的。问题是，当我有一些非常长的内容并且我调整浏览器的窗口大小时，带有内容的div不会“刷新”，然后内容会流过div。当我再次最大化窗口时，一切都很好。我现在想要尝试的是当浏览器窗口的大小发生变化时重新加载div，所以它会重新加载div的所有大小和溢出，所以它会再次适合。我尝试了以下jQuery代码。

$(window).resize(function() {
    $('#OverlayContent').load();
});

然而没有任何事情发生。我还试图改变叠加的宽度，看看代码是否有效。在那里，我看到它不适用于“OverlayContent”，但适用于“Overlay_1”。我认为问题是div里面的div。那么有什么解决方案我可以在窗口大小改变时简单地刷新div。我认为这里的jQuery是一个很好的起点，但现在我不确定。

Answer 1

您无需重新加载div infact。只需尝试以下内容，以便在window为resized

时内容适合div

将以下样式添加到div

    div {
    width: 500px;
    word-wrap: break-word;
    font-size: 2vw;
}

演示 click here 和 Fiddle Demo here

修改

选中 UPDATED DEMO

您的.overlay课程中有一个已设置max-height:80%的媒体资源。这就是它出问题的地方！我已将其设置为100%

.overlay { min-width:400px; max-width:75%; width:auto; min-height:200px; max-height:100%; //this was 80% height:auto; margin-top:20px; background:rgb(250,250,250); background:rgba(250,250,250,0.9); border: 1px solid #000000; display:none; z-index:10000; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; box-shadow: 2px 4px 7px 2px #bbb; -webkit-box-shadow: 7px 7px 5px #bbb; -moz-box-shadow: 7px 7px 5px #bbb; }

Answer 2

案例1：

我有溢出：隐藏或溢出：自动或溢出滚动设置，但文本短时间内离开div（调整大小时缓慢刷新）

那么有什么解决方案我只需要在大小时刷新div 窗口的更改

您可以使用以下内容：

$("#OverlayContent").html($("#OverlayContent").html());

为了在重新调整大小时重绘内容。这有效，因为它“刷新”内容而不是loading内容（这是与您认为的不同的方法）。

案例2：

我正在尝试创建一个响应式布局，并且我在div上设置了高度和宽度。我不知道应该设置什么溢出。

但是，如果您正在寻找“额外文本”滚动（而不是溢出）的方法，我希望确保您使用了以下声明：

overflow:auto;

如果文本太长，

将添加滚动条。

more information on overflow CSS property

案例3：

要宽度调整到屏幕大小，并调整高度以包含文本。我不想要滚动条。

为此，您可以将宽度设置为“变量值” - 例如，使用％或视图宽度单位。这意味着该框将根据屏幕进行调整（不设置溢出）：

width:80%;
height:auto; /*this will ensure text 'fits' the container*/
min-height:100px; /*optional. Ensures box is always at least 100px tall.*/

这将允许您根据屏幕大小更改文本框。

调整窗口大小时刷新div

2 个答案:

案例1：

案例2：

案例3：