Css 保持全高，内容不溢出_Css_Safari_Overflow

Css 保持全高，内容不溢出

css safari

Css 保持全高，内容不溢出,css,safari,overflow,Css,Safari,Overflow,我在一个页面上工作，我创建了一个两栏的布局，中心内容在一个#包装器中，然后我使两栏的高度相同第1列的内容比第2列多，因此为了实现相同的等高，我的代码是： CSS: #col1{ 宽度：70%；高度：100%；最小高度：30em；浮动：左侧；边距：0；填充：0； } #col2{宽度：30%；高度：100%；最小高度：30em；浮点：右；边距：0；填充：0；} #包装{宽度：70%；高度：100%；最小高度：30em；边距：0自动；} HTML: 我认为，如果我在重新调整浏览器尺寸的每一步都扩

我在一个页面上工作，我创建了一个两栏的布局，中心内容在一个

#包装器中，然后我使两栏的高度相同
第1列的内容比第2列多，因此为了实现相同的等高，我的代码是：
CSS:
#col1{
宽度：70%；高度：100%；
最小高度：30em；浮动：左侧；边距：0；填充：0；
}

#col2{宽度：30%；高度：100%；最小高度：30em；浮点：右；边距：0；填充：0；}

#包装{宽度：70%；高度：100%；最小高度：30em；边距：0自动；}

HTML:
我认为，如果我在重新调整浏览器尺寸的每一步都扩展最小高度，那么实际上，这两列都会增长并容纳溢出文本
 请注意：minheight
属性的值将覆盖max height
和height
。因此，由于#col1
和#col2
都位于高度为100%的#wrapper
中，您应该只指定最小高度
关于Safari中溢出的文本，您是否尝试过添加文本溢出：省略号或文本溢出：剪辑
到#col1
？
您使用的是最小高度：30em
，因此根据您所看到的屏幕大小，您总是有溢出的风险。使用底部有固定高度页脚的旧的100%高度内容如何
像这样：

并不是说我输入的盒子尺寸规则对IE7不起作用。
什么的全高？窗口？你也不希望页脚溢出页面？我应该再指定一点，在这个例子中，页眉和页脚都是5em。我不希望任何一列的内容溢出到页脚。请参阅，我确实希望文本保持在列中显示。我不希望页脚掩盖任何文字。我也尝试了你的建议，文本溢出：省略号（或剪辑）
，但没有效果。当页面的宽度和高度为100%时，JSFIDLE保持良好的布局，但一旦你将屏幕调整为更小的尺寸，列中的内容被覆盖/隐藏。一旦我们进入这些维度，您希望列滚动？？一旦页脚接近上面的列内容（比如2em），我希望页脚停止。这有点像一个垂直的流体布局，如果这有意义的话。最终，如果内容是用JS或其他语言动态更改的，则列将容纳内容，页脚将保持在其下方。正如我所说，代码在所有其他浏览器中都运行良好，但Safari的反应不同。要查看Safari网站，我检查了Safari的CSS参考，看看是否支持minheight
，而且它是，从1.3开始，所以肯定有什么东西在它上面。两个立柱都是弹性的，所以它们的拉伸尺寸可能与最小高度的影响不足有关？
<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>

@media screen and (min-width: 1000px) {
#col1, #col3, #wrapper { min-height: 35em; }
}

@media screen and (min-width: 500px) {
#col1, #col2, #wrapper { min-height: 40em; }
}