html - 缩放 div 以适应页面

Question

我对 CSS 和 HTML 很陌生，我正在尝试创建一个 CSS 版本：

http://i.stack.imgur.com/JNgUb.jpg

我已经成功创建了 4 个具有 4 种不同颜色的 div，但这是我的结果：

http://i.imgur.com/ihYblSv.png

如何缩放 div 以适应整个页面？

我的代码是：

    body{
    background-color: #eae1c8;
    }
    #bg {
    transform:rotate(30deg);
    -webkit-transform:rotate(30deg);
    -moz-transform:rotate(30deg);
    -ms-transform:rotate(30deg);
    -o-transfrom:rotate(30deg);
}

#blue {
    height: 25%;
    background-color: #9dd2b5;
}
#green {
    height: 25%;
    background-color: #6aa427;
}
#yellow {
    height: 25%;
    background-color: #f0b747;
}
#orange {
    height: 25%;
    background-color: #de5b1e;
}

Answer 1

It fit the entire page before you rotated it.

If you want it to take up the entire page, set page body { overflow: hidden; } and then play with the sizes of your divs to fill the space. Set #bg { height: 160%; } and each color to 40% and see how that works.

Answer 2

这是我用一点 CSS 创建的 Javascript 函数。这非常适合在不更改比例的情况下自动调整页面大小。这将在启动和调整窗口大小时调整页面大小。您可以将 body 更改为您想要整页的元素，如果您希望仅在单击时调整其大小，则可以更改函数以使用单击事件。只需删除对该函数的调用并将 $(window).resize 更改为 $('#elementid').click

CSS：

body{
   height:620px;
   width:1023px;
   position:absolute;
   box-sizing:border-box;
   transform-origin: 0 0;
   -moz-transform-origin:0 0;
   -o-transform-origin: 0 0;
   -webkit-transform-origin: 0 0;
}

JavaScript：

var ratio;
var left;
resize();

$(window).resize(function () {resize();});

function resize()
{
    ratio = window.innerHeight / $('body').innerHeight();
    if (window.innerWidth / $('body').innerWidth() < ratio) {
        ratio = window.innerWidth / $('body').innerWidth();
    }
    ratio -= .04;
    $('body').css('-ms-zoom', ratio);
    $('body').css('-moz-transform', 'scale(' + ratio + ')');
    $('body').css('-o-transform', 'scale(' + ratio + ')');
    $('body').css('-webkit-transform', 'scale(' + ratio + ')');
    $('body').css('transform', 'scale(' + ratio + ')');
    left = ($(window).innerWidth() - $('body').outerWidth() * ratio) / 2;
    $('body').css('left', left);
}