如何根據視口大小調整Div高度？

Question

我希望#maincontent div能夠滾動，其餘的div保持靜止。

當我嘗試下面的代碼時，我得到了所需的效果，但#maincontent div向下延伸到實際視口，我無法讀取其餘文本。我希望#maincontent的高度根據視口進行調整，但不需要調整。

CSS

#framecontentTop{ 
    position: inherit; 
    top: 5px; 
    left: 0px; /*Set left value to WidthOfLeftFrameDiv 220px*/ 
    right: 200px; /*Set right value to WidthOfRightFrameDiv*/ 
    width: 100%; 
    height: 175px; 
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ 
    background-color: #8b45130; 
} 

#maincontent{ 
    padding: 10px; 
    position: absolute; 
    top: 175px; /*Set top value to HeightOfTopFrameDiv*/ 
    height: 100%; 
    left: 220px; /*Set left value to WidthOfLeftFrameDiv*/ 
    right: 205px; /*Set right value to WidthOfRightFrameDiv*/ 
    width: 500px; 
    bottom: 0px; 
    overflow: auto; 
    background: #fff; 
} 

的JavaScript

$(function(){ 
    var parent= $('#maincontent'); 
    var parentOffset = parent.offset(); 
    var bottom = 0; 
    parent.find('*').each(function() { 
     var elem = $(this); 
     var elemOffset = elem.offset(); 
     var elemBottom = elemOffset.top + elem.outerHeight(true) - parentOffset.top; 
     if (elemBottom > bottom) { 
      bottom = elemBottom; 
     } 
    }); 
    parent.css('min-height', bottom); 
}); 

任何幫助將不勝感激，我已經感到失望，該代碼有一段時間了。

Answer 1

您可以通過使用

box-sizing: border-box 

例如解決它： -

* { 
    padding: 0; 
    margin: 0; 
} 
html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
} 

html,body { 
    height:100%; 
} 

#framecontentTop{ 
    top: 5px; 
    left: 0px; /*Set left value to WidthOfLeftFrameDiv 220px*/ 
    right: 200px; /*Set right value to WidthOfRightFrameDiv*/ 
    width: 100%; 
    height: 175px; 
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ 
    background-color: #8b45130; 
    position:relative; 
    z-index:1; 
} 

#maincontent{ 
    padding: 10px; 
    position: relative; 
    top: -180px; /*Negative Set top value to HeightOfTopFrameDiv + position*/ 
    padding-top: 180px /*Set padding-top value to HeightOfTopFrameDiv + position*/ 
    height: 100%; 
    left: 220px; /*Set left value to WidthOfLeftFrameDiv*/ 
    right: 205px; /*Set right value to WidthOfRightFrameDiv*/ 
    width: 500px; 
    overflow: auto; 
    background: #fff; 
} 

最重要的部分是將top設置爲#framecontentTop的負值和施加padding-top到#maincontent的到正確的位置的內容移位。

而且，由於要素是重疊的，它通過應用的z-index到#framecontentTop

這需要校正參考樣本： - http://jsbin.com/neweyozamiha/2

Answer 2

你可以在你的身高上使用vh單位。例如：

#maincontent{ 
    padding: 10px; 
    position: absolute; 
    top: 175px; /*Set top value to HeightOfTopFrameDiv*/ 
    height: 100vh; // USE VH HERE 
    left: 220px; /*Set left value to WidthOfLeftFrameDiv*/ 
    right: 205px; /*Set right value to WidthOfRightFrameDiv*/ 
    width: 500px; 
    bottom: 0px; 
    overflow: auto; 
    background: #fff; 
} 

這表示主要內容元素將是當前視點高度的100％。

雖然有一個支持問題，所以如果你需要它在IE9下工作，那麼你將不得不嘗試一種不同的方法。

Here is the support in more detail.

Answer 3

絕對定位，既然你有上下集，沒有必要設置高度。假設#maincontent的最近相對或絕對定位的父級是頁面正文，將bottom設置爲0應該適合您，而不必使用javascript。

#maincontent{ 
    padding: 10px; 
    position: absolute; 
    top: 175px; /*Set top value to HeightOfTopFrameDiv*/ 
    /*height: 100%;*/ 
    left: 220px; /*Set left value to WidthOfLeftFrameDiv*/ 
    right: 205px; /*Set right value to WidthOfRightFrameDiv*/ 
    width: 500px; 
    bottom: 0; 
    overflow: auto; 
    background: #fff; 
} 

撥弄：http://jsfiddle.net/bxos3tx3/

另一種方法是爲具有頁面內容被相對定位，但隨後做其它元素的固定的定位（相對於它們的位置使得所述視口，而不是其他的元素）

Answer 4

如果你不給它一個height或width但做給它一個top,right, bottom和left位置然後元素的大小自動100％的邊界。

html,body {height:100%; min-height:100%; background-color:grey; padding:0; margin:0;} 
 
#maincontent{ 
 
    padding:10px; 
 
    position: absolute; 
 
    top: 175px; /*Set top value to HeightOfTopFrameDiv*/ 
 
    left: 220px; /*Set left value to WidthOfLeftFrameDiv*/ 
 
    right: 205px; /*Set right value to WidthOfRightFrameDiv*/ 
 
    bottom:0px; 
 
    overflow: auto; 
 
    background: white; 
 
}

<div id="maincontent"> 
 
<p>Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor.</p><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p><p>Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper.</p> 
 
</div>