javascript - 如何让这块div的高度变为屏幕高度的75%

问题描述

问 题

网页显示是这样的：
上面这块空白区域，我设置的row的style高度为25%；

下面的显示灰色显示区域的高度是通过获取客户端屏幕高度来设置的，我想设置为屏幕宽度的75%（也就是减去上面的25%），从而让客户端不在有滚动条；改如何写JS呢？

JS代码：

<script type="text/javascript">
function changeFrameHeight(){

    var ifm= document.getElementById("ifrname"); 
    ifm.height=document.documentElement.clientHeight;
    
    ifm.width=document.documentElement.clientWidth;
}
</script>

HTML代码：

        <!-- 使用Three.js     -->
        <div>
            <iframe name="ifrname" id="ifrname"
                src="ThreeTestContent.do?model=${ThreeModel}&texture=${ThreeTexture}"
                onload="javascript:changeFrameHeight()"></iframe>
        </div>

解决方案

  <div class="top">上部</div>
  <div class="content">内容</div>

let content = document.querySelector('.content');
  let topBar = document.querySelector('.top');
  let topHeight = parseInt(window.getComputedStyle(topBar).height);

  let wholeHeight =  document.documentElement.clientHeight;

  content.style.height = wholeHeight - topHeight + 'px';

这篇关于javascript - 如何让这块div的高度变为屏幕高度的75%的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！