在HTML5中，最简单的方法就是设置高度:100vh。其中“vh”代表浏览器窗口的视口高度。响应浏览器和移动设备的大小调整。

此代码工作，但不完全支持:

height: 100svmax;

浏览器支持

你可以使用伪列来作弊 或者您可以使用一些CSS技巧

我也遇到过类似的问题，解决方法是这样的:

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
}

我想要一个以页面为中心的div高度100%的页面高度，所以我的总解决方案是:

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0; 
    width: XXXpx; /*otherwise div defaults to page width*/
    margin: 0 auto; /*horizontally centers div*/
}

你可能需要让一个父元素(或简单的“body”)具有位置:relative;

Document.body.onload = function () { var textcontrol = document.getElementById("page"); textcontrol.style.height = (window.innerHeight) + 'px'; ｝ < html > <头> <标题> < /名称> < / >头 身体< > <div id="page" style="background:green;" > < / div > < /身体> < / html >

使用绝对位置。注意，这不是我们通常使用的绝对位置，它需要手动布局东西或有浮动对话框。这将在您调整窗口或内容大小时自动拉伸。我相信这需要标准模式，但可以在IE6及以上版本中工作。

只需要用你的内容替换id ' content'的div(这里指定的高度只是为了说明，你不需要在实际内容上指定高度。

<div style="position: relative; width: 100%;">
      <div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
      <div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
         <div style="height: 10000px;" id="thecontent"></div>
      </div>
</div>

这种工作方式是外部div作为导航栏的参考点。外部div由'content' div的内容展开。导航条使用绝对定位将自身延伸到其父div的高度。对于水平对齐，我们让内容div的偏移量与导航条的宽度相同。

这在CSS3 flex box模型中变得更加容易，但IE中还没有，并且有一些它自己的怪癖。