0

私はページで作業していて、中央のコンテンツを含む 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>

#col1Safari ではマイ コンテンツがオーバーフローしますが、他のブラウザーではオーバーフローしません。この問題の解決策はありますか? 高さと最小幅のプロパティをいじってみましたが、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; }
}

ブラウザーのサイズ変更の各ステップで min-height を拡張すると、実際には両方の列が大きくなり、オーバーフローしたテキストに対応できると思いました。

4

2 に答える 2

0

使用してmin-height: 30emいるため、見ている画面のサイズによっては、常にオーバーフローするリスクがあります。高さ 100% の古いコンテンツを使用し、下部に高さ固定のフッターを配置するのはどうですか?

このような：

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

私が入れたボックスサイズの規則が IE7 では機能しないというわけではありません。

于 2013-11-04T23:57:08.223 に答える
0

Just a note: The value of the min-height property overrides both max-height and height. So as both #col1 and #col2 are in #wrapper that has 100% height, you should only specify a min-height.

In terms of the overflowing text in Safari, have you tried adding text-overflow: ellipsis; or text-overflow: clip; to #col1?

于 2013-11-04T23:52:44.767 に答える