Question

我有几个div，即

<div class="div_1"></div>
<div class="div_2"></div>
<div class="div_3"></div>

获取窗口高度后

windowHeight = window.innerHeight;

我想将div高度操作为窗口高度的一部分，例如div_1应为30％，div_2应为窗口高度的45％等。我需要在javascript / jquery中执行此操作。

Answer 1

您可以简单地使用CSS

.div_1 {height:30vh;}

这将设置高度等于视口高度的30％。 vh是视口的高度。

在IE中部分支持＆gt; 8，然后在Opera中不支持，否则完全支持它。 http://caniuse.com/#feat=viewport-units

在jQuery中执行此操作

$('.div_1').css("height", $(document).height()*30/100+"px"); // Will set its height equal to 30% of that of document.

Answer 2

使用jquery＆amp; amp;数据属性

<div id="container">
  <div class="div_1" data-percent="30">Div1</div>
  <div class="div_2" data-percent="40">Div2</div>
  <div class="div_3" data-percent="30">Div3</div>
</div>

<script>
  $(window).resize(function(){
  var height = window.innerHeight;
   console.log('resised',height)
      $('#container>div').each(function(){
         $(this).height(height*parseInt($(this).data('percent'))/100);
        console.log($(this).height(),height*parseInt($(this).data('percent'))/100);
      });
    })
</script>

Answer 3

我操纵@ void的答案得到了我所期待的答案。代码是

$('.div_1').height(windowHeight*30/1400+"em");

我将windowHeight除以1400而不是100，因为正文字体为14px，用于将其从px更改为em。

操纵与窗口高度相关的div高度

3 个答案: