css - CSS 動的高さ

Question

3 つの div タグ、ラッパー、およびラッパー内に 2 つのサイドバイサイドがあります。

<div id="wrapper">
   <div id="left"></div>
   <div id="right"></div>
</div>

<div id="left">タグの高さが可変で、ラッパーを伸ばしている状態を作りたいです。

その結果、<div id="right">ラッパーがどのような高さになったとしても、は拡張されます。

これを実現する CSS は何ですか? ありがとう！

score 4 · Accepted Answer

おそらく私はパーティーに遅れていますが、純粋なCSSを使用して説明することを行うのは本当に簡単です。秘訣は、#right絶対位置を作成し、topそれに0を与えることです。bottomこれにより、与えられている高さに拡張されます。これが完全な実例です—は緑、青、赤ですが、とで完全に覆われているため、表示されません。線を削除して、線がない場合の外観を確認してください。#left#wrapper#left#right#wrapper#left#rightbottom: 0;

<html lang="en">
  <head>
    <title></title>

    <style type="text/css">
      #wrapper {
        background: #fdd;
        position: relative;
        width: 300px; /* left width + right width */
      }

      #left {
        background: #dfd;
        width: 200px;
      }

      #right {
        background: #ddf;
        bottom: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 100px;
      }
    </style>
  </head>

  <body>
    <div id="wrapper">
      <div id="left">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue</p>
        <p>massa, scelerisque non viverra sagittis, egestas nec erat. Aliquam vel</p>
      </div>
      <div id="right">
        <p>turpis metus. Sed id lorem eu urna suscipit porttitor. Nullam. </p>
      </div>
    </div>
  </body>
</html>

score 3 · Accepted Answer

Jquery を使用する場合は、これを行うことができます。

$(document).ready(function(){
   var leftHt = $('#left').height();
   $('#right').css("height",leftHt);

});

これは css ではありませんが、非常にシンプルで動作するはずです。少なくとも私の知る限りでは、CSS ではこれを簡単に行うことはできません。

Jquery API をまだ持っていない場合は、これを Javascript の上に置きます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="javascript" language"javascript"></script>

ここでの作業例：

http://michaelpstone.net/development/dynamic-height.html

score 2 · Accepted Answer

#left がどうなったかに #right が一致する良い方法はありません。これを行う最良の方法は、おそらく次のとおりです。

<div id="wrapper">
    <div id="right"></div> <!-- note that right comes before left -->
    <div id="left"></div>
</div>

次に、このスタイルを持っています：

#left, #right {
    width: 50%; /* Adjust as needed */
#right {
    float: right;
}

このように、#right はページの長さに影響しませんが、#left は常に影響します。ただし、#right はまだ #left の長さまで伸びません。#left に伸ばす必要がある理由はわかりませんが、表面的なものだと思います。ずっと下まで繰り返したい場合は、代わりに #left または #wrapper から適用しようとします。

たとえば、#left ホワイトと #right red が必要な場合:

#left {
    background: #fff;
}
#wrapper {
    background: #f00;
}

score 0 · Accepted Answer

最も実用的な解決策はテーブルです - [this SO question] ( Make Two Floated CSS Elements the Same Height )を参照してください。

もちろん、テーブルを使用しない独自の理由があるかもしれません...

score 0 · Accepted Answer

背景などを作成しようとして同じ高さが必要な場合は、テーブルをお勧めします。はるかに簡単です。特に、div と float div を使用する必要がある場合、この記事では、私が確認した唯一の有効な方法について説明します。これは 3 列用ですが、2 列用に変更できます。

http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm

css - CSS 動的高さ

5 に答える 5

Related

Reference