javascript - 如何根据视口(viewport)大小调整 Div 高度？

Question

我希望 #maincontent div 能够滚动，而其余 div 保持静止。

当我尝试以下代码时，我得到了预期的效果，但是 #maincontent div 比实际视口(viewport)更向下延伸，我无法阅读剩余的文本。我希望根据视口(viewport)调整 #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