2

このトピックに関する多くの議論がここにありますが、それでも私が望むものを得ることができません. 並べて配置したい 2 つの div ブロックがあります。

一番左側には、ツリー メニューと背景色が含まれています。幅を自動に設定しており、ツリー メニューにノードがいくつあるかに関係なく、ビュー ポートを垂直方向に背景色で塗りつぶしたいと考えています。

右側のブロックのコンテンツを左側のブロックの隣に 2px のマージンを空けて配置し、残りのスペースを埋める自動の高さと幅を持ち、オーバーフローのスクロール バーを取得します。

ビューポートを垂直に埋めるために左ブロックを取得する唯一の方法は、位置：絶対および上：0px、下：0pxを設定することです。しかし、それを行うと、ツリーが拡大および縮小するにつれて左のボックスの幅が拡大および縮小するときに、残りのスペースを埋めるように右のブロックを配置する方法がわかりません。

左ボックスの現在の幅に基づいて右ボックスの幅を設定する方法はありますか?

基本的に、これらの div には次の css を持つ 2 つの Div があります...

.treeMenu {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: auto;
    margin-right:2px;
    padding: 10px;
    background: rgba(218, 235, 245, 6); 
}


.viewer {
    position: relative;
    float:right;

    width: 100%;   
         //100% fills the view port width which is not what I want
         //a fixed width is not what I want either as it will not adjust to the size of the tree menu.
         //if I could set the width or left margin based on the position of the left block's right side I think I could get it to work.

    height: 100%; 
    border: solid;


  }

*私の質問を解決してくれた Wesley に感謝します* 作業コード...

HTML:

<div class="wrapper">
    <div class="treeMenu" >
        &nbsp;
    </div>
    <div class="viewer">
        &nbsp;
    </div>
</div>

CSS:

body {
    width: 100%;
    margin: 0 auto;
    font: 100% Arial, Arial, Helvetica, sans-serif;
}

.wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
}

.treeMenu {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: auto;
    margin-right:20px;
    padding: 10px;
    background: rgba(218, 235, 245, 6);
}

.viewer {
    position: relative;
    float:right;
    height: 100%; 
    border: solid;
    overflow-x:scroll;
    overflow-y:scroll;
}

jQuery:

$(document).ready(function() {
    $("div.viewer").append("<img id='theImg' src='Images/FM-000-T01 TITLE INDEX QMC 1824 (1).jpg'/>");
    $('div.viewer').width(($(document).width() - $('div.treeMenu').width())-28);
});

$(window).resize(function() {
       $('div.viewer').width(($(document).width() - $('div.treeMenu').width())-28);
}).resize();
4

2 に答える 2

2

pureCSS クロスブラウザー ソリューション: (dabblet.com のデモ)

html:

<div id="wrap">
    <div id="treeMenu">
        <div class="content">menu abc</div>
    </div>
    <div id="viewer">
        <div class="content">menu abc</div>
    </div>
</div>

CSS:

#wrap {
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    width: 100%;
}

#treeMenu, #viewer {
    height: 100%;
}

#treeMenu {
    float: left;
    background: rgba(218, 235, 245);
    padding-right: 3px;
}

#viewer {
    background: red;
    overflow-y: auto;
}
于 2012-05-25T11:48:57.050 に答える
2

CSSだけでどうにかする方法が思いつきません。可能かもしれませんが、クロスブラウザーで動作するクリーンなソリューションがあるとは思えません。

ただし、JavaScript が少しあれば、難しくはありません。

何が必要かを正確に理解するのは少し難しいです。次のコードを試してください（jsFiddle here）：

html:

<div id="treeMenu">menu abc</div>
<div id="viewer">this is the viewer</div>

javascript (簡単なので jQuery を使用):

$(document).ready(function() {
    $(window).resize(function() {
       $('#viewer').width($(document).width() - $('#treeMenu').width());
    }).resize();
});

CSS:

html,body {
    height: 100%;
}
#treeMenu {
    display: inline-block;
    background: rgba(218, 235, 245, 6);
    height: 100%;
}
#viewer {
    display: inline-block;
    position: absolute;
    display: inline-block;
    background-color: red;
    height: 100%;
}
于 2012-05-25T07:30:09.740 に答える