Html 缩放div以适应页面

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

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

如何缩放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;
}

---

在旋转页面之前，它适合整个页面

---

如果希望它占据整个页面，请设置页面正文{overflow:hidden；}，然后调整div的大小以填充空间。将#bg{height:160%；}和每种颜色设置为40%，看看它是如何工作的。

下面是我用一点CSS创建的Javascript函数。这对于在不改变比率的情况下自动调整页面大小非常有用。这将在启动时以及调整窗口大小时调整页面大小。您可以将body更改为您想要完整页面的元素，如果您只想在单击时调整单击事件的大小，则可以将函数更改为使用单击事件。只需删除对函数的调用并更改$（窗口）。将大小调整为$（'#elementid'）。单击

CSS:

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);
}

var比率；
左var；
调整大小（）；
$（窗口）.resize（函数（）{resize（）；}）；
函数resize（）
{
比率=window.innerHeight/$（'body'）.innerHeight（）；
if（window.innerWidth/$（'body'）.innerWidth（）<比率）{
比率=window.innerWidth/$（'body'）.innerWidth（）；
}
比率-=.04；
$（'body'）.css（'-ms zoom'，比率）；
$（'body'）.css（'-moz-transform'，'scale（'+ratio+'））；
$（'body'）.css（'-o-transform'，'scale（'+ratio+'））；
$（'body'）.css（'-webkit transform'，'scale（'+ratio+'））；
$（'body'）.css（'transform'，'scale（'+ratio+'））；
左=（$（窗口）.innerWidth（）-$（'body'）.outerWidth（）*比率）/2；
$（'body'）.css（'left'，left）；
}

我将每种颜色的div更改为40%，将#bg设置为160%，将body设置为overflow:hidden；现在滚动条被隐藏了。这是我的结果：将{position:absolute；top:-30%；left:-30%}添加到#bg现在只有背景色，我看不到带颜色的div。从#bg中删除{position:absolute；top:-30%；left:-30%}后，div返回。将“%”更改为“px”，并处理这些值。现在您所要做的就是调整div的位置。

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);
}