調整相對DIV中絕對的div液體CSS

好吧...這裏是我的問題：我有一個HTML &身體網頁從CSS中設置爲：調整相對DIV中絕對的div液體CSS

body,html{ 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    overflow:hidden; 
}

，也是一個WebKit的標籤禁用滾動：

/*Disable scrolling*/ 
::-webkit-scrollbar { 
    display: none; 
}

身體裏面我用3周的div覆蓋在頁面的整個可用空間：（我不會用實際的CSS代碼的div，因爲它不重要了這件事，我會寫只有一個基本的代碼才能獲得ide EA）正如我所說的，三米相對的div覆蓋100％可用高度和寬度：

.div1{ 
    position: relative; 
    width: 100%; 
    height: 10%; 
} 
.div2{ 
    position: relative; 
    width: 100%; 
    height: 80%; 
} 
.div3{ 
    position: relative; 
    width: 100%; 
    height: 10%; 
}

現在，這裏是我的問題： *中間DIV（DIV2）裏面我有4個同心圓所有其中絕對的div是用css3寫的。這些divs保持「絕對」真的很重要。

這裏是CSS爲他們：

.size-large, 
.size-normal, 
.size-small, 
.main-frame{ 
    position:absolute; 
    left:0; 
    right:0; 
    margin:0 auto; 
    background: transparent; 
    border: 3px dotted #999; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
    top: 50%; 
} 

    .main-frame{ 
     width: 50%; 
     padding-bottom: 50%; 
     margin-top:-25%; /* push back half */ 
    } 
    .size-large{ 
     width: 30%; 
     padding-bottom: 30%; 
     margin-top:-15%; /* push back half */ 
    } 
    .size-normal { 
     width: 20%; 
     padding-bottom: 20%; 
     margin-top:-10%; /* push back half */ 
    } 
    .size-small { 
     width: 10%; 
     padding-bottom: 10%; 
     margin-top:-5%; /* push back half */ 
    }

問題是，這些圈子不調整acording到其中，他們屬於相對股利。它們的寬度/高度以百分比表示，根據身體要素設置。

我希望我的設計是流動的，只使用可用的網頁而不用滾動，但也可以調整所有元素在任何顯示中的大小。

全屏結果：http://jsfiddle.net/Nn7mU/1/embedded/result/

代碼視圖：http://jsfiddle.net/Nn7mU/1/

來源

2014-03-26 Ionut Florin Lupu

你有一個演示的jsfiddle什麼可以分享？或者至少你的HTML？ –

@ZachSaucier我現在將演示，請給我5分鐘。 –

@ZachSaucier這是FULL SCREEN的結果：http://jsfiddle.net/Nn7mU/embedded/result/這裏是代碼鏈接：http://jsfiddle.net/Nn7mU/ –