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

How do I adjust a Div height based on viewport size?

本文关键字：调整 Div 高度 何根 视口      更新时间：2023-09-26

我希望#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);
});

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

您可以使用来解决它

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的内容移动到正确的位置。

由于元素重叠，需要通过对#framecontentTop 应用z索引进行校正

这是一个参考样本：http://jsbin.com/neweyozamiha/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以下工作，那么你必须尝试不同的方法。

以下是更详细的支持。

使用绝对定位，由于您有顶部和底部设置，因此无需设置高度。假设#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/

另一种选择可能是让页面内容相对定位，但随后在其他元素上进行固定定位（使它们的位置相对于视口，而不是其他元素）

如果您没有给它一个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>

相关文章：