0

私はdivとページ全体に柔軟な高さを作るために多くの方法を使用しましたが、方法はありません.

私がやりたいことは：

ヘッダーの後のページに 2 つの列 (right_side、left_side) があり、左側と右側の両方に柔軟なコンテンツが含まれます。

そのため、両方の列の高さを柔軟にする必要があります。また、記事が右側のコンテンツよりも高くなる可能性があるため、右側の高さは左側に依存する必要があります..

「height」と「min-height」を試しましたが、方法がありません

これは私のコードです

<html style="min-height: 100%;">

<body style="min-height: 100%; width: 980px; border-right: 2px solid black;  
  border-left: 1px solid black; margin: 0 auto;">

    <div><img src="header.jpg"/></div>

    <div id="content" style="min-height: 100%">
    <div id="right" style="background: red; float:right; width: 280px;  min-height: 100%;">my flexible right content</div>
    <div id="left" style="background: blue; float:left; width: 700px; min-height: 100%;">
    <p>my flexible article </p>
    <p>my flexible article </p>

   </div>
  </div>

  </body>


</html>
4

1 に答える 1

0

これを試してください：http://jsfiddle.net/mcfurljw/erdH7/

純粋な CSS と HTML が必要な場合は、ある列を別の列に柔軟に対応させる効果を得るために、div 内でいくつかの div を使用する必要があります。html 形式の場合、このようなことができます。

<div id="container2">
    <div id="container1">
        <div id="col1">
        </div>
        <div id="col2">
        </div>
    </div>
</div>

div への参照を使用して CSS スタイルを head に移動するか、それらを個別のリンクされた CSS ファイルにまとめて配置することを強くお勧めします。

基: http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

于 2013-11-10T13:41:32.667 に答える