css - 将 2 个 block 并排放置在视口(viewport)中，其中一个 block 设置为宽度 :Auto

Question

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

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

我希望右侧 block 的内容位于左侧 block 旁边，边距为 2px，并且具有自动高度和宽度，可以填充剩余空间并获取滚动条以防止溢出。

我发现让左侧 block 垂直填充视口(viewport)的唯一方法是设置position:absolute和顶部:0px，底部:0px。但是，当我这样做时，我无法弄清楚如何定位右侧 block ，以便当左侧框随着树展开和折叠而宽度扩展和收缩时，它填充剩余空间。

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

基本上我有 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;
}