-1

こんにちは私はページhttp://rygol.cz/qlife/を持っています、そしてIamがズームアウトすると、コンテンツは彼のdivから消えます。私があなたの身長の場合：自動; または高さ：100％は問題ありませんが、左の列は右よりも小さいので、クリアは役に立ちません。誰かがそれを修正する方法を知っていますか？

#leftcolumn { 
 color: #333;
 background: #fff;
 background-image:url("./images/corner.png");
 background-repeat:no-repeat;
 padding: 10px;
 height: 800px;
 width: 244px;
 float: left;
}
#rightcolumn { 
 float: right;
 color: #333;
 background: #fff;  
 padding: 10px;
 height: 800px;
 width: 638px;
 display: inline;
 margin-bottom: 10px;
}
4

2 に答える 2

1

ヘッダーとコンテンツの間に余分なスペースが必要な場合は、#leftcolumnと#rightcolumnを背景色が設定された追加のラッパー コンテナーに配置し、背景色が設定されていない#containerを使用する必要があります。

HTML構造:

<div id="container">
  <div id="header"></div>
  <div id="content-wrapper">
      <div id="leftcolumn"></div>
      <div id="rightcolumn"></div>
  </div>
</div>

そしてCSS：

#container {
margin: 0 auto;
width: 922px;
}

#header {
color: #333;
background: #fff;
width: 902px;
padding: 10px;
margin-bottom: 10px;
height: 200px;
}

#content-wrapper {
background-color: #fff;
min-height: 1px;
overflow: hidden; /* clear hack :) */
}

#leftcolumn {
color: #333;
background: #fff;
background-image: url("./images/corner.png");
background-repeat: no-repeat;
padding: 10px;
width: 244px;
float: left;
}

#rightcolumn {
float: right;
color: #333;
background: #fff;
padding: 10px;
width: 638px;
margin-bottom: 10px;
}
于 2013-01-31T19:07:42.330 に答える
0

列の高さの宣言を削除します。overflow-y: scroll高さを削除することに固執しますが、使用することもできます。考慮すべきもう1つのことは、人々は一般的にそこまでズームアウトしないということです.テキストは、壊れるズームレベルで読むことができなくなります(chrome v24).

同じ高さの列が必要な場合は、短い方の列を片側に浮かせて設定position: relativeし、top: 0; bottom: 0;次にもう一方の列を設定してoverflow: hidden;、フロートを「クリア」する必要があります。注: これが機能するためには、浮動列がマークアップの最初に来る必要があります。

于 2013-01-31T19:18:31.463 に答える