如何用CSS/HTML为嵌入的GitHub Gist设置固定尺寸与滚动条？

直接把Gist脚本套进一个容器div里，再给容器加CSS样式就能实现固定尺寸+内部滚动，不会影响页面其他区域（比如你下方的仪表盘）。

HTML 代码 #

给Gist脚本加个带类名的容器：

<div class="gist-container">
  <script src="https://gist.github.com/my_username/4e475964906b87e07ce66fddc29e39ee.js"></script>
</div>

CSS 样式 #

设置容器的宽高，开启内部滚动，同时调整Gist自带的样式避免溢出：

.gist-container {
  width: 500px;
  height: 400px;
  overflow: auto; /* 内容超出时自动显示滚动条 */
  border: 1px solid #eee; /* 可选：加个边框区分区域 */
}

/* 去掉Gist默认的外边距，防止内容撑破容器 */
.gist-container .gist {
  margin: 0;
}

/* 可选：调整代码块内边距，让内容更适配容器 */
.gist-container .gist-file .gist-data {
  padding: 10px;
}

说明 #

• overflow: auto 只会在Gist内容超出500×400的容器时显示滚动条，滚动范围仅限容器内部，不会带动整个页面滚动。
• 如果想强制显示滚动条（不管内容是否超出），可以把overflow: auto改成overflow: scroll。

内容的提问来源于stack exchange，提问作者Luis Hernández