html - 如何将未知高度的 tvo div 垂直放置在彼此之上以填充​​可用页面高度？

Question

我正在尝试布局两个垂直放置的容器，它们应该填充页面上可用的垂直空间，使得顶部容器随内容垂直扩展，而底部容器占据剩余的垂直空间并溢出滚动条.

这是一个草图:

我无法定义第二个容器的属性(尤其是高度)。我最好的镜头是:

.container {
    margin-top: 50px;
    margin-left: 25px;
    margin-bottom: 50px;
    position: absolute; 
    height: auto;
    top:0;
    bottom:0;
    background:#ff8;
}

.first {
    position: relative;
    left: 0;
    top: 0;
    border: 1px solid red;
}

.second {
    position: relative;
    left: 0;
    bottom: 0;
    margin-top: 10px;
    overflow-y: scroll;
    border: 1px solid green;
}

标记:

<div class="container">
    <div class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim mi, semper id lectus nec, tincidunt congue odio. Aliquam erat volutpat. Curabitur tellus eros, mollis malesuada imperdiet eget, congue in nisi. Donec vel nunc id libero elementum dignissim. Nulla facilisi. Mauris laoreet bibendum vestibulum. Integer odio magna, tempus eu orci quis, dignissim blandit enim. </div>
    <div class="second">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>

然而，第二个 div 在下方流过容器，而不是仅延伸到可用的容器空间。

注意:问题之所以重要，是因为两个 div 的高度值事先不知道，取决于内容! (否则我可以手动设置高度而不打扰你们 :) )

关于如何进行的任何提示？

Answer 1

这是我的解决方案:

http://jsfiddle.net/VRT6U/2/

HTML

div id="main"> 
<div id="top">
    fdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa 

    </div>
<div id="bot">
    bot 
    fdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsa
    </div>
</div>


<div id="addMoreText" title="click here to add more text to top element">click me!</div>

CSS

#main {width: 200px; height: 400px; background: #EEE; border: 1px solid #CCC;}
#top  {width: 190px; margin: 5px;  background: #CCC; border: 1px solid #AAA; color: #888;}
#bot  {width: 190px; margin: 5px;  background: #CC5; border: 1px solid #AAA; color: #888; overflow: 
        -moz-scrollbars-vertical; overflow-y: scroll;}

#addMoreText { width: 100px; height: 20px; background: #06A; border: 1px solid #036; text-align:center; color:white; font-size:11px; font-weight:bold; line-height:20px; margin:20px 50px; cursor:pointer;}

jQuery

计算BotDivHeight();

$('#addMoreText').click(function(){
    $('#top').html($('#top').html()+ " some text ");
    //if you load text not only on page load, you have to recalculate the height.
    calculateBotDivHeight();
});

function calculateBotDivHeight(){
    $newHeight = $('#main').height() - $('#top').outerHeight(true) - 6;
    $('#bot').height($newHeight);
}