如何将Div持续调整为100%VH

时间:2016-03-04 01:24:27

标签: javascript jquery html css

小提琴:https://jsfiddle.net/jzhang172/s4tzo2ms/

我想不断地将div高度调整到视图高度的100%。我可以在浏览器加载时设置它但我不确定如何在用户更改浏览器时总是更改它,而不仅仅是在浏览器加载时。



var width = $(window).width(); 
var height=$(window).height(); 
$("#mydiv").width(width);
$("#mydiv").height(height);

#mydiv{
  background:black;
  height:100px;
  width:100%;
}
*{
  margin:0px;
  padding:0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv"></div>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:2)

为什么你不在100vh使用height

#mydiv{
  background:black;
  height:100vh;
  width:100%;
}
*{
  margin:0px;
  padding:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv"></div>

答案 1 :(得分:2)

如果你更喜欢js而不是css解决方案,你需要这样的东西:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace ConsoleApplication6
{
    class Program
    {
        static void Main(string[] args)
        {


             int i;
            while(i==20)
            {
                if (i % 5 == 0)
                    Console.WriteLine(i);
                else
                    Console.Write(i);
            }


        }
    }
}

答案 2 :(得分:0)

为什么不直接依赖CSS?

首先删除现有的javascript,然后将浏览器和mydiv的宽度和高度设置为100%,这样当你调整屏幕大小时,div会相对于父母重新调整大小。

html,body{
 height:100%;
  width:100%;
}
#mydiv{
  background:black;
  height:100%;
  width:100%;
}

*{
  margin:0px;
  padding:0px;
}