画像のような設定のページを作ろうとしています。A & B は動的な高さで、幅は静的です。C は、高さ 500px、幅 500px の静的サイズです。
各AとBのコンテンツの高さが、たとえば500pxの高さを超えないようにするにはどうすればよいですか
画像のような設定のページを作ろうとしています。A & B は動的な高さで、幅は静的です。C は、高さ 500px、幅 500px の静的サイズです。
各AとBのコンテンツの高さが、たとえば500pxの高さを超えないようにするにはどうすればよいですか
これを a と b の CSS に追加します。
max-height:500px;
.
フロート (存在する場合) を正しくエスケープしている限り、そこで切断されます。
追加する必要があるかもしれません
overflow:hidden;
a または b のコンテンツが 500px に及ぶ場合、ページに表示されなくなります。
質問を理解している完成したコードは
CSS
#wrap { width: 700px; height:500px; } /* this combines both static widths and height stays dynamic */
.a, .b { float:left; background-color:#F03; width: 200px; height:50%; min-height:100px; max-height: 500px; }
.c { background-color:#990; width: 500px; height: 500px; float: right; }
HTML
<div id="wrap">
<div class="c">C</div>
<div class="a">A</div>
<div class="b">B</div>
<div style="clear:both;">
</div>
C が上にあることに注意してください。これは、コンテナーの右側にフロートし、残りは C が満たされていないスペースを見つけようとするためです。視覚的な補助のための背景色。
http://jsfiddle.net/QW5MQ/ <-- これらはあなたの友達です。