在 window 调整大小时刷新 div

Question

我有一个 div 的问题，或者准确地说是溢出。我有以下代码：

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

class "overlay" 只是为了拥有实际的叠加层和一个关闭按钮，所有这些都是在 jQuery 中使用一些 CSS 和 jQuery 工具制作的.问题是，当我有一些非常长的内容并且我调整浏览器的 window 大小时，带有内容的 div 不会 "refresh" 然后内容流过 div.当我再次最大化 window 时，一切又都好了。我现在想尝试的是在浏览器 window 的大小发生变化时重新加载 div，所以它会重新加载 div 和溢出的所有大小，所以它会再次适合。我尝试了以下 jQuery 代码。

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

然而什么也没有发生。我还尝试更改叠加层的宽度以查看代码是否有效。在那里我看到它不适用于 "OverlayContent" 但适用于 "Overlay_1"。我认为问题是div里面的div。那么有什么解决方案可以让我在 window 的大小时发生变化时简单地刷新 div 吗？我认为 jQuery 这是一个很好的起点，但现在我不确定。

Answer 1

案例一：

我有 overflow:hidden 或 overflow:auto 或溢出滚动设置，但文本会在短时间内超出 div（调整大小时刷新缓慢)

So is there any solution how I simply can refresh a div when the size of the window is changed

您可以使用：

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

以便在调整大小时重绘内容。这是因为 'refreshes' 内容而不是 loading 内容（这与您认为的方法不同）。

案例二：

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

但是，如果您正在寻找一种方法让 'extra text' 滚动（而不是溢出），我希望确保您使用了如下声明：

overflow:auto;

如果文本太长，会添加滚动条。

more information on overflow CSS property

案例三：

A 想要调整宽度以适应屏幕大小，并改变高度以包含文本。我不想有滚动条。

为此，您可以将宽度设置为 'variable value' - 例如，通过使用 % 或视图宽度单位。这意味着框将根据屏幕调整（不设置溢出）：

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

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

Answer 2

您不需要重新加载 div 事实上。只需尝试如下操作，以便当 window 为 resized

时内容适合 div

将以下样式添加到您的 div

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

用于演示 click here and Fiddle Demo here

编辑

勾选这个UPDATED DEMO

您在 .overlay class 中设置了属性 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;
}

在 window 调整大小时刷新 div

Refreshing a div when the window is resized

html

jquery

overflow

案例一：

案例二：

案例三：