使用液体css调整相对div内的绝对div大小答案

【问题标题】：resize absolute div inside relative div with liquid css使用液体css调整相对div内的绝对div大小
【发布时间】：2014-04-09 00:42:57
【问题描述】：

好的...这是我的问题：我有一个网页，其 html 和正文从 css 设置为：

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

还有一个 webkit 标签来禁用滚动条：

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

在主体内部，我使用 3 个 div 来覆盖页面中的整个可用空间：（我不会为 div 使用实际的 css 代码，因为这对这件事并不重要，我只会编写一个基本代码来获得想法）正如我所说，三个相对 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 调整大小。它们的宽度/高度以百分比形式给出，是根据 body 元素设置的。

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

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

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

【问题讨论】：

你有演示 jsFiddle 或者有什么要分享的吗？或者至少是你的 HTML？
@ZachSaucier 我现在就做演示，请给我 5 分钟。
@ZachSaucier 这是全屏结果：jsfiddle.net/Nn7mU/embedded/result，这里是代码链接：jsfiddle.net/Nn7mU
@ZachSaucier 抱歉，我不得不更新链接，因为我在那里留下了一些不需要的文字。我在原始帖子中写了链接。我也会将它们留在此评论中：jsfiddle.net/Nn7mU/1/embedded/result 和 jsfiddle.net/Nn7mU/1

标签： css responsive-design css-position absolute

【解决方案1】：

据我了解，您希望确保同心圆保持在蓝色 div 内，同时根据您设置的百分比宽度（即 .main-frame {width: 50%}、.size- large {width: 30%), .size-normal {width: 20%}, .size-small {width: 10%})

您的圈子确实在根据您的蓝色 div 进行调整（基于宽度 % 而不是高度 %）。因此，由于您的蓝色 div 的宽度为 100%，因此圆圈只会根据该宽度进行调整。

您需要找到一种同时使用高度和宽度 % 的方法，以保持纵横比和中心定位。

我建议阅读此线程，它提供了可能的解决方案： HTML and CSS Fluid Circle

【讨论】：