我正在处理一个页面，并创建了一个 2 列布局，其中中心内容位于 a 中#wrapper，然后我将两列设置为相同的高度。
第 1 列的内容比第 2 列多，所以要达到相同的高度，我的代码是：
CSS：
#col1 {
width: 70%; height: 100%;
min-height:30em; float: left; margin: 0; padding: 0;
}
#col2 { width: 30%; height:100%; min-height:30em; float: right; margin: 0; padding: 0; }
#wrapper { width: 70%; height: 100%; min-height:30em; margin: 0 auto; }
HTML：
<html>
<head>
...
</head>
<body>
<header><h1>Title</h1></header>
<div id="wrapper">
<div id="col1">
Content here
Content Here
Content Here
Content Here
Content Here
</div>
<div id="col2">
Some Content
</div>
</div>
<footer>
<p>Footer Content</p>
</footer>
</body>
</html>
我的内容在#col1Safari 中溢出，但在其他浏览器中没有。有人有这个问题的解决方案吗？我玩过 height 和 min-width 属性，但没有找到让 Safari 浏览器遵守的方法。
我的目标是使页面具有响应性，#col1并且#col2无论内容如何（并且没有溢出），它们都可以扩展到完整的高度。
如果我的问题不清楚，我可以澄清一下。
干杯!
编辑
我还尝试使用一些媒体查询，例如：
@media screen and (min-width: 1000px) {
#col1, #col3, #wrapper { min-height: 35em; }
}
@media screen and (min-width: 500px) {
#col1, #col2, #wrapper { min-height: 40em; }
}
我认为如果我在调整浏览器尺寸的每一步都扩展最小高度，那么这两个列实际上都会增长并容纳溢出文本。