生長在彈出窗口的div大小用粘頁腳

Question

調整我大致有以下佈局：

<div class="outer-div"> 
    <div class="content-inner-div"> 
    </div> 
    <div class="footer-inner-div"> 
    </div> 
</div> 

外div包含兩個div - 內容 - 內部DIV，所有的內容去，和頁腳，inner-與幾個按鈕的div。
我要讓這種結構在jQuery的彈出窗口，就像這樣：

var template = 
    '<div class="outer-div">' 
     + '<div class="main-inner-div">' 
      + '</div>' 
       + '<div class="footer-inner-div">' 
        + '</div' 
         + '</div' 
          + '</div'; 

this.popup = $(template); 

var formulaDialog = $(this.popup).dialog({ 
    modal: true, 
    autoOpen: false, 
    resizable: true, 
    width: '300', 
    minHeight: '100', 
    closeText: '', 
}); 

$(formulaDialog).dialog('open'); 

現在我想的是，當我調整彈出窗口 - 頁腳-DIV堅持彈出窗口的底部，和內容的div並且它的內容尺寸不斷增大並佔用彈出窗口中的所有可用空間。 Content-div可能包含非常大的內容，不適合彈出窗口 - 所以我可能需要在content-div中進行垂直滾動。

我在SO上看到過幾個類似的問題（即jQuery, change div height to automatically fill out remainder of screen if content isn't already larger和set div height using jquery (stretch div height)），但是因爲我沒有JS，JQuery或CSS方面的經驗，所以通常我會根據自己的情況推斷這些答案。

在這一點上我設置maxHeight內容-DIV到窗口高度的60％

$(window).height() * 0.6 

，這樣，當內容DIV確實有大量的內容模式彈出達不到的程度到屏幕底部。所以我得到的一個問題是，當我調整這個內容時，div不會超出最大尺寸。

我該如何實現粘貼頁腳的美觀大小，而不是現在的混亂？

P.S.調整了一點Vimal的答案，以完全滿足我的問題 - http://jsfiddle.net/7XBrb/2/

Answer 1

大多數你想要的可以使用普通的ol CSS來完成，除了處理調整位（實際上它處理了，只是沒有足夠好的使用它）。

HTML與一些垃圾內容

<div class="outer-div"> 
    <div class="content-inner-div"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rhoncus libero eu diam aliquet lobortis. Nunc ac turpis ac enim vehicula feugiat non ac nisi. Suspendisse potenti. Mauris porta suscipit tellus, nec dapibus dui gravida eget. Vivamus interdum molestie dolor sit amet pharetra. Duis auctor facilisis scelerisque. Curabitur eget lacus augue, eget porttitor erat. Sed ornare augue vel elit pellentesque ut laoreet mauris tempus. Nullam accumsan, est sit amet sodales scelerisque, tortor ante fermentum leo, id aliquam metus purus tristique erat. 

     Duis at arcu ac mauris auctor mollis placerat ac risus. Nunc porttitor bibendum tempus. Cras eget justo at dui sagittis lobortis. Aenean quam purus, dapibus a blandit at, elementum ut quam. Pellentesque pretium, metus tempus laoreet hendrerit, nunc neque pellentesque nisl, vitae aliquam felis libero sit amet erat. Proin ultrices sodales enim, in fermentum neque sagittis eu. Quisque scelerisque tincidunt iaculis. Donec bibendum ipsum quis nunc pretium sit amet adipiscing purus lobortis. Vestibulum id tortor et neque lobortis pellentesque sit amet eu velit. Sed interdum interdum nisl. Nulla hendrerit placerat suscipit. Mauris congue turpis sed nibh tristique semper. Nunc in sem vel nibh fermentum hendrerit. Pellentesque vel sapien diam. Sed ultricies tincidunt arcu, nec porttitor metus dapibus at. 
    </div> 
    <div class="footer-inner-div"> 
    <p>blah</p> 
    </div> 

CSS。設置內容div的初始高度和overflow屬性以便在需要

.content-inner-div { height: 60%; overflow: auto; } 
.footer-inner-div { position: fixed; bottom: 0; left: 0; background-color: #F00; width: 100%;} 

時滾動條顯示的jQuery

• 使用resize事件來檢測窗口的大小
• 獲取的變化窗戶的高度
• 減去它的高度footer div
• 減去行高（調整最後一行文字）

• 將它指定爲content div的新高度。

  $(function() { 
      $(window).on('resize', function() { 
      $('.content-inner-div').css('height', ($(this).height() - $('.footer-inner-div').outerHeight() - parseInt($('.content-inner-div').css('line-height'), 10)) + 'px'); 
      }); 
  }); 
  

---

編輯：忘了加上Fiddle