如何將未知高度的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

calculateBotDivHeight（）;

$('#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); 
} 

Answer 2

你需要使用javascript或jquery來計算這個來回應你的文本。這裏是一個jQuery的解決方案，用小提琴來插入或刪除文字來查看的div如何改變

小提琴1：http://jsfiddle.net/5p77w/3/
小提琴2（更多內容有溢出）：http://jsfiddle.net/5p77w/4/

var $parentH = $('.container').outerHeight(); 
var $firstH = $('.first').outerHeight(); 
var $applyH = $parentH - $firstH; 

$('.second').css("height", $applyH); 

你需要使用.outerHeight()來包含您的邊距和填充。您計算.first的高度，並從父項的總高度中減去。您保存在一個變量這個號碼使用jquery .css()

如果你的網站是響應我建議在一個函數把這個和設置頁面調用執行此高度調節

的功能將其應用到 .second元素

$(document).ready(function() { 
changeHeights(); 
}); 

$(window).resize(function() { 
changeHeights(); 
}); 

function changeHeights() { 
var $parentH = $('.container').outerHeight(); 
var $firstH = $('.first').outerHeight(); 
var $applyH = $parentH - $firstH; 

$('.second').css("height", $applyH); 
} 

，你也應該考慮應用最大高度與第一分度的情況下，含量超過父從而使高度溢出的第二個div usless