Question

好的......这是我的问题：我有一个html＆amp;的网页身体从css设置为：

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

以及用于禁用滚动条的webkit标记：

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

在我体内使用3个div来覆盖页面中的整个可用空间：（我不会使用div的实际css代码，因为它对于这个问题并不重要，我只会编写一个基本代码来获取ideea）正如我所说，三个相对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个同心圆，所有这些都是在css3中写的绝对div。这些div仍然是“绝对的”非常重要。

这是他们的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 */
    }

问题是这些圈子不会根据它们所属的相对div来调整大小。它们的宽度/高度以百分比给出，根据身体元素设置。

我希望我的设计是流畅的，只使用可用的网页而不滚动，但也要在任何显示器上调整所有元素的大小。

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

代码视图：http://jsfiddle.net/Nn7mU/1/

Answer 1

根据我的理解，您希望确保您的同心圆保持在蓝色div内，同时根据您设置的百分比宽度保持完美的圆形（即.main-frame {width：50％}，。size-大{宽度：30％）,.尺寸正常{宽度：20％}，。尺寸小{宽度：10％}）

您的圈子确实根据您的蓝色div进行调整（基于宽度％而非高度％）。因此，由于您的蓝色div的宽度= 100％，因此圆圈将仅根据该值进行调整。

您需要找到一种使用BOTH高度和宽度％的方法，以保持纵横比和中心位置。

我建议阅读这个提供可能解决方案的线程： HTML and CSS Fluid Circle

用液体css调整相对div内的绝对div

1 个答案: