Question

我有一个函数可以将textarea中的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规则'overflow：auto'添加到包含的div中。如果内容溢出div，则会自动添加滚动条。

Answer 2

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

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

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

Answer 3

你尝试过这样的事吗？

#outputContainer {
    ovwerflow-y: auto;
}

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

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

3 个答案: