Question

我在一个页面上工作，我创建了一个2列布局，其中心内容位于#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>

我#col1中的内容在Safari中溢出，但其他浏览器中没有。有没有人有这个问题的解决方案？我玩过高度和最小宽度属性，但没有找到让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; }
}

我认为，如果我扩展了浏览器维度重新调整大小的每一步的最小高度，那么这两列实际上会增长并容纳溢出文本。

Answer 1

注意：min-height属性的值会覆盖max-height和height。因此#col1和#col2都位于#wrapper，身高100％，您应该只指定min-height。

就Safari中的溢出文字而言，您是否尝试将text-overflow: ellipsis;或text-overflow: clip;添加到#col1？

Answer 2

您正在使用min-height: 30em，因此您始终存在溢出的风险，具体取决于您正在查看的屏幕大小。如何在底部使用固定高度页脚的旧100％高度内容？

像这样：

http://jsfiddle.net/davidpauljunior/8Hkz2/2/

不是我放入的盒子大小规则对IE7不起作用。

保持完整高度，不会出现内容溢出

2 个答案: