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，{{ 1}}和bottom位置则元素的大小自动为其边界的100％。

＆＃13;

left

＆＃13;

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

＆＃13;

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

4 个答案: