可滚动div上的部分隐藏内容

Question

我一直在寻找类似的问题，但我找不到一个，所以我暴露了我的问题，希望你能告诉我我做错了什么以及如何纠正它。 我正在尝试完成以下场景：两个div，并排，使用100％的高度和宽度，其中左边的一个可以滚动。右边的一个div有几个div，最后一个div的内容也可以滚动。 图片可以更好地描述场景：

蓝色div是可以滚动的，但是红色的高度是未知的。 我能够部分完成这个，但问题是最后一个div的内容从视图中拉下来的比例与红色div的高度总和相同，所以当用户滚动那个蓝色div时他不会能够查看它的全部内容。 我该怎么做才能解决这个问题？ 我还有一个小提琴，可以重现这种行为：http://jsfiddle.net/d3dNG/3/ 感谢您的任何反馈。

HTML：

<div class="container">
    <div id="left">
        Left (first)<br />
        [...]Left<br />
        Left (last)<br />
</div>
<div id="right">
    <div id="header1">Header 1</div>
    <div id="header1">Header 2</div>
    <div id="header1">Header 3</div>
    <div id="rightContent">
        Right (first)<br />
        Right<br />
        [...]
        Right (last)<br />
    </div>
</div>
</div>

CSS：

html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}

.container {
height: 100%;
width: 100%;
background: pink;
}

#left {
float: left;
width: 100px;
height: 100%;
overflow-y: auto;
background: gold;
}

#right {
height: 100%;
width: 100%;
}

#rightContent {
height: 100%;
overflow-y: auto;
background: lime;
}

Answer 1

因为你不知道#header1的大小是什么，你可以通过使用javascript或jQuery来解决这个问题。

（请务必仅在页面上使用ids一次，因为它们是唯一的，#header1使用了3次）

我改变了html：

<div class="headParent">
     <div class="header1">Header 1</div>
     <div class="header1">Header 2</div>
     <div class="header1">Header 3</div>
</div>

我写的小jQuery：

function rightSize() {
    var hH = $('.headParent').height(), // grabs the `#header1`'s parents height
        mH = $('#rightContent').height() - hH; // minus the height from the `#rightContent`

    $('#rightContent').css({height: mH});
}

rightSize();

最后，小提琴：Demo

.header1 #rightContent的{​​{3}}仍会正确适应内容。

Answer 2

试试这个：

<强> HTML

<div class="container">
    <div id="left">
        Left (first)<br />
        [...]Left<br />
        Left (last)<br />
</div>
<div id="rightOne">
    <div id="header1">Header 1</div>
    <div id="header1">Header 2</div>
    <div id="header1">Header 3</div>
</div>
<div id="rightTwo">
    <div id="rightContent">
        Right (first)<br />
        Right<br />
        [...]
        Right (last)<br />
    </div>
</div>
</div>

<强> CSS

#rightOne {
    height: 16%;
    width: 100%;
}

#rightTwo {
    height: 84%;
    width: 100%;
}

我已经更新了你的小提琴：http://jsfiddle.net/d3dNG/4/