css+div 高度满屏

方法一

通过JQuery,获取窗体的高度,设置给对应的div。代码如下:

ht = $(document.body).height();
$("#mDiv").height(ht - 170);

缺点:由于浏览器是先解析css,后执行JS,导致页面在加载时,mDiv先呈现其原始高度,再变为其全屏效果,div在页面中有一个闪烁。

 

方法二

通过css的calc()函数实现,其中,1vh = one percent of the view-port's height:

#mDiv {
  width: 100%;
  min-height: 300px;
  /*height:100%;*/
  height:calc(100vh - 170px);
}

如果需要#mDiv高度占满一屏,则需设置 height: calc(100vh)。注意,设置 height:100% 或 height: clac(100%)不能达到效果。

 

方法三

给需要设置高度占满全屏的元素及其所有父元素设置 height:100%:

<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height: 100%;">
      <p>
        这样这个div的高度就会100%了
      </p>
    </div>
  </body>
</html>

 

posted @ 2020-09-25 15:04  少司命  阅读(629)  评论(0编辑  收藏  举报