2

これが私のHTML構造です：

<li>
     <div class='wrapper'>
          <div class='controller'> ... </div>
          <div class='preview'> ... </div>
     </div>
</li>

'controller' div と 'preview' div のコンテンツは異なる場合があるため、コンテンツの高さも異なります。「コントローラー」と「プレビュー」の div の高さの間に相関関係は必要ありません。特定のラッパーでは、一方が 10px の高さで、もう一方が 100px の高さである場合があります。小さい方の高さに合わせて小さい方を拡張したい。「height: 100%;」の CSS ルールを使用する ラッパーに明示的な高さが設定されていないため機能しません。また、ラッパー内のコンテンツが異なる可能性があるため、ラッパーに高さを設定できません。

javascriptではなくcssで解決策を探しています。私の会社には、javascript が有効になっていないブラウザー用に書くという厳格なポリシーがあります。

4

3 に答える 3

2

div に 100% の高さを使用すると、div のコンテンツが必要とするだけの高さしか占有しません。高さを明示的に設定する必要があります。

これは、JavaScript を使用して行うことができます。

var height = document.getElementById('parentDiv').style.height;
document.getElementById('childDiv').style.height = height +'px';
于 2012-04-11T14:02:54.917 に答える
2

スクリプトで設定することも、JS を使用したくない場合は、偽の列の手法を使用することもできます。

http://www.alistapart.com/articles/fauxcolumns/

于 2012-04-11T14:04:30.063 に答える
1

2 つの div が (float などを使用して) 隣り合っていると仮定すると、これは HTML で非常に一般的な問題であり、まだネイティブな解決策はありません。

これを解決する 1 つの方法は偽の列ですが、これには制限があります。通常、非常に広い境界線を使用して小さい div の背景色を偽造するため、無地の色しか使用できません。

高さを本当に同じにする必要がある場合 (両方の div、背景画像、または両方が div の下部にある必要がある div 内に配置された要素でさえ同じ境界線を使用するという理由で) を使用する必要があります。 JavaScript ソリューション。

于 2012-04-11T14:08:22.160 に答える