規模div來適應

頁

我很新的CSS和HTML，我試圖創建的這個CSS版本：規模div來適應

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

我已經成功地創建了4個格有4種不同顏色但是這是我的結果：

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

我如何可以擴展股利，以適應整個頁面？

我的代碼是：

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

來源

2013-07-24 Roymishali

它適合整個頁面，您轉動它。

如果您希望佔用整個頁面，請設置頁面正文{overflow：hidden; }然後玩你的div的大小來填補空間。設置#bg {height：160％; }和每種顏色的40％，看看它是如何工作的。

來源

2013-07-24 20:23:39 philthyfool

我改變了每個顏色的div爲40％，將#bg設置爲160％並將主體設置爲溢出：隱藏;所以現在滾動條被隱藏了。這是我的結果：http://i.imgur.com/JPtFg4Y.png – Roymishali

add {position：absolute;頂部：-30％;左：-30％}到#bg – philthyfool

現在只有背景顏色，我無法用顏色看到div。 http://i.imgur.com/btrqmIh.png 刪除{position：absolute;頂部：-30％;從#bg離開：-30％}，div回來了。 – Roymishali

這是我用一個小小的CSS創建的Javascript函數。這非常適合在不改變比例的情況下自動調整頁面的大小。這將調整啓動時的頁面大小和窗口的大小。您可以將主體更改爲您想要整頁的元素，並且如果您希望僅在單擊它時調整大小，則可以將該函數更改爲使用單擊事件。只是刪除通話的功能，改變$（窗口）.resize爲$（ '＃elementid'）點擊

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

來源

2016-05-02 17:03:02

規模div來適應

回答

相關問題