0

私は問題があります。コードからわかるように、「div1」という名前の div には 3 つの div があります。最初 (黄色) の div を上に、3 番目 (黄色) を下に、2 番目 (ピンク) の div (ピンク) を残りのスペースに配置します。唯一の固定された高さは、黄色の div の高さです。ピンクのdivで残りのスペースを埋める方法を教えてください。これが私のコードです：

<div style="width:100%;background-color: lime;display: table;border-collapse: collapse;">
<div style="display: table-row;">
    <div id=div1 style="display: table-cell;background-color: #0f0;">

        <div style="background-color:yellow;width:100%;height:20px;">s</div>
        <div style="background-color:pink; width:100%;">
            Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa    
        </div>
        <div style="background-color:yellow;width:100%;height:20px;">s</div>
    </div>
    <div style="background-color: #f00;display: table-cell;width:250px">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
    </div>
</div>

4

3 に答える 3

0

少しの JavaScript を使用して、数学を実行し、ピンクの div の高さを計算できます。 

var rightD = document.getElementById('rightDiv');
var yellowD = document.getElementById('yellowD');
var middleD = document.getElementById('middleDiv');
var height = rightD.clientHeight - (yellowD.clientHeight * 2);

middleD.style.height = height + 'px';

http://jsfiddle.net/kX4UB/1/

多くの変数を宣言する必要はありませんが、簡単に表示するために宣言しました。高さを赤い div の高さから黄色の div の高さ x2 を引いた値に設定しました。このコードは、ドキュメント内のこれらの div の後の js タグに配置する必要があることに注意してください。

于 2012-11-13T23:22:35.243 に答える
0

ちょっとしたトリックでこれを行うことができます:
右のセルのテキストは高くなっています: http://jsfiddle.net/UQgXM/2/
左のセルのテキストは高くなっています: http://jsfiddle.net/UQgXM/3/

CSS を HTML から分離しました。主な変更点：

  • テーブルに高さを指定します。これは、セル内の div を高さの設定に対応させるために必要です。テーブルの高さは無視されます。1％に設定しましたが、テーブルを大きくしたいです。
  • ピンクの div の高さが 100% で、コンテンツを正しく配置するためのマージンとパディングが指定されています。

  • 黄色の div (特に一番上のもの) の z-index が 1 で、position: relative が z-index に応答するようにします。そうしないと、ピンクの div の後ろに落ちてしまいます。

        <div class="top">s</div>
    <div class="middle">
        Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa    
    </div>
    <div class="bottom">s</div>
</div>
<div class="rightcell">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
</div>

    </p>

そしてCSS：

.table {
    width:100%;
    height: 1%;
    background-color: lime;
    display: table;
    border-collapse: collapse;
}

.row {
    display: table-row;
}
#div1 {
    display: table-cell;
    background-color: #0f0;
}
.top,
.bottom{
    background-color:yellow;
    width:100%;
    height:20px;
    z-index: 1;
    position: relative;
}
.middle {
    background-color:pink; 
    width:100%;
    height: 100%;
    margin: -20px 0;
    position: relative;
    padding: 20px 0;
}
.rightcell {
    background-color: #f00;
    display: table-cell;
    width:250px;
}
​
于 2012-11-13T23:17:14.803 に答える
0

グラフィックを含めるために、これを回答として投稿する必要があります。Firefox と Chrome と IE では、あなたのページはあなたが説明したように見えます: ここに画像の説明を入力

これはどのように表示されるべきですか？

于 2012-11-13T22:59:49.070 に答える