2

这里有很多关于这个话题的讨论，但仍然无法得到我想要的。我有 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();
4

2 回答 2

2

我想不出只用 CSS 来处理你想要的方法。也许这是可能的，但我怀疑是否有一个干净的解决方案可以跨浏览器工作。

但是，使用一点 javascript 应该不难。

It's a bit hard to understand what you want exactly, try following code (jsFiddle here):

html:

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

javascript (using jQuery because it's easy):

$(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 回答
2

pureCSS cross-browser solution: (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;
}
于 2012-05-25T11:48:57.050 回答