如何根据视口大小调整Div高度？

debugcn 发表于 Dev

Gwisher

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

当我尝试下面的代码时，我得到了预期的效果，但是#maincontentdiv进一步向下延伸到了实际的视口，因此我无法读取其余文本。我希望#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);
});

任何帮助将不胜感激，我已经对此代码感到沮丧了一段时间。

莎拉特MR

您可以使用解决

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;
}