如何为jquery.json-viewer的JSON输出容器添加固定高度滚动条？

我来帮你搞定这个滚动条和固定高度的问题！你现在的问题主要是CSS选择器没对应上，再加上插件生成的内部元素可能悄悄撑开了容器，咱们一步步调整：

问题分析 #

你之前写的CSS是针对output标签的，但实际生成的容器是<pre id="output">，所以样式根本没生效在目标元素上；另外插件默认生成的.json-viewer列表有自带的margin，也可能导致容器高度被撑开。

解决方案 #

1. 修正CSS样式 #

把你的CSS改成下面这样，确保样式作用到正确的容器，并且强制固定高度和滚动：

#output {
  height: 100px; /* 固定高度，不用min/max，直接定死 */
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
  overflow-x: auto; /* 可选：防止长JSON键/值横向溢出 */
  background-color: white;
  width: 99.3%;
  resize: none;
}

/* 优化插件内部列表的间距，避免默认margin撑开容器 */
.json-viewer ul {
  margin: 0;
  padding-left: 20px; /* 保留缩进，去掉多余margin */
}

2. 简化JS代码 #

把JS里设置背景色和宽度的代码移到CSS里，更符合前端规范，JS只负责初始化插件：

function doStuff(outputVal) {
  var temp = JSON.parse(outputVal);
  $("#result").append('<pre id="output"></pre>');
  $('#output').jsonViewer(temp);
}

3. 验证效果 #

现在当你加载500个元素的JSON时，#output容器会保持100px高度，内容超出部分会自动显示垂直滚动条，完全不会撑开容器高度。

内容的提问来源于stack exchange，提问作者user9491184