如何根据视口大小调整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>