将 2 个块并排放置，将一个块设置为宽度：自动填充视口

Question

这里有很多关于这个话题的讨论，但仍然无法得到我想要的。我有 2 个 div 块，我想并排放置。

最左侧包含树形菜单和背景颜色。我将宽度设置为自动，并希望背景颜色垂直填充视口，而不管树形菜单中有多少节点。

我希望右侧块的内容与左侧块相邻，边距为 2px，并且具有自动高度和宽度来填充剩余空间并获得滚动条以应对任何溢出。

我发现让左侧块垂直填充视口的唯一方法是设置位置：绝对和顶部：0px，底部：0px。但是当我这样做时，我无法弄清楚如何定位正确的块，以便它填充剩余的空间，因为左边的盒子随着树的展开和折叠而扩大和缩小宽度。

有没有办法根据左框的当前宽度来设置右框的宽度？

基本上我有 2 个 div，这些 div 具有以下 css...

.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();

Answer 1

pureCSS跨浏览器解决方案：(demo on 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;
}

Answer 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%;
}