如何在 div 中约束呈现的 HTML 代码

Question

我有一个函数，可以将HTML代码从文本区域呈现为特定大小的div。此div 的大小是在页面加载时确定的，通常约为浏览器宽度的 45%。我想知道是否有任何方法可以限制渲染的内容不超出此div 的范围，而是在渲染的内容超出边界时添加滚动条。

基本上，我希望这个div的行为类似于浏览器窗口，当你渲染HTML网页时。这是我拥有的用于渲染的代码：

$(document).ready(function(){
        $("#showmeImg").click(function(){
            $("#outputContainer").html($(myEditor.getValue()));
        });
    });

因此，当单击"showmeImg"时，"myEditor"的内容将被渲染并放置在"outputContainer"div标签中。我对于这个div 标签所拥有的只是基本的样式，如背景颜色、宽度和高度。

Answer 1

你应该能够使用CSS获得这种效果。 如果您以编程方式设置宽度（正如您的问题所暗示的那样），那么您需要做的就是设置height和overflow样式以获得所需的行为。 像这样：

#outputContainer {
    height: 300px;
    overflow: auto;
}

如果希望滚动条始终存在（无论当前内容是否需要滚动），请使用 overflow: scroll; 。

Answer 2

您应该将 CSS 规则 'overflow：auto' 添加到包含的div 中。如果内容溢出到div 之外，将自动添加滚动条。

Answer 3

你试过这样的事情吗？

#outputContainer {
    ovwerflow-y: auto;
}

当容器内有足够的内容时，这将添加一个垂直滚动条。不过，有许多不错的jQuery插件可以添加更好的滚动条:)。http://enscrollplugin.com/例如。