使用可以垂直放置的尽可能多的div填充浏览器

时间:2012-10-03 11:22:37

标签: jquery html css css3

我只是说要考虑这个问题...我需要

计算浏览器窗口高度并附加设置高度的div来填充,直到窗口已满...这样div就会垂直堆叠...我想生成一个过渡

任何指针都会很棒

干杯

2 个答案:

答案 0 :(得分:0)

var divHeight = 100;
var winHeight = window.innerHeight;
for(i =0; i < parseInt(winHeight / divHeight);i++){
$('<div style="height:100px;float:left;"></div>').appendTo('body');
}

这是你的意思吗?

答案 1 :(得分:0)

请在下面找到添加宽度和宽度div的Jquery代码。高度100px,根据浏览器的高度。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertically Add up Div's</title>
  <style type="text/css">
    #container      { background:#ccc; display:inline-block; height:100%; margin:0; padding:0; width:100%; }
    .add-blocks     { border:1px solid red; float:left;  height:100px; width:100px; }
  </style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

  <script type="text/javascript">

    $(document).ready(function(){

        var wheight = $(window).height();
        var wwidth  = $(window).width();

        /* Number of rows */
        var blocks  = Math.round(wheight / 100);        

        /* Number of cols */
        var cols = Math.round(wwidth / 100);

        /* Div html markup */
        var str = "<div class='add-blocks'>&nbsp;</div>";

        for(var i = 1; i < (blocks); i++)
        {
            for(var j = 1; j < cols; j++)
            {
                $("#container").append(str);
            }
        }

    });

    </script>



</head>

<body>
<div id="container">&nbsp;</div>
</body>
</html>