Question

作为一项实验，我一直在尝试使用CSS中的百分比将DIV置于BODY标记中。我想我已经弄明白了，但是由于TopStyle的魔力一旦你保存就没有历史，我就失去了它。

所以，这是我的HTML：

<html>
    <head>
        <link href="shadow.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

而且，这是我的CSS：

*
{
    margin: 0;
    padding: 0;
}

body
{
    background-color: #EEEEEE;
    margin: 10%;
}

div#box
{
    position: absolute;
    background-color: #FFFFFF;
    width: 740px;
    min-width: 80%;
    min-height: 80%;
    border: #CCCCCC thin solid;
}

回答您的直接问题：

为什么我在盒子上使用绝对定位？
因此，即使没有拉伸内容，盒子也会接受80％的高度。

为什么我这样宽度，最小宽度和最小高度？
由于我希望盒子DIV占用80％的可用空间，因此使用最小值是有意义的。我使用像素宽度来确保无论区域有多小，它都不会比740px更薄，导致浏览器激活水平滚动条。理论上，如果内容推动超过可用区域的80％，它们的内容高度应该激活垂直滚动条。

现在的诀窍是让它无法居中并在盒子周围保持10％的空间。我试过申请“保证金：10％;”到BODY，然后“填充：10％;”到BODY，最后“保证金：10％”到DIV盒子。所有这些选择都给了我相同的结果：它在水平方向上居中但是在垂直方向上表现得很奇怪。我的四面都没有空间。唯一符合要求的是DIV框似乎占用了80％的可用空间。

看起来这应该是正确的。盒装DIV占80％，每边的利润率为10％（垂直20％，水平20％），占100％。不知道为什么它不起作用。

我发誓我以同样的方式工作，现在我已经失去了它。

有没有人解释为什么百分比似乎没有正确显示以及我需要什么解决方案？

谢谢！

Answer 1

试试这样：

*
{
    margin: 0;
    padding: 0;
}

body { background-color: #EEEEEE; }

div#box
{
    position: absolute;
    border: #CCCCCC thin solid;

    top: 10%;
    left: 10%;

    width: 80%;
    height: 80%;

    min-width: 740px;
    min-height: 500px;    
}

IE将允许DIV缩小到极限以下，因为最小宽度和最小高度不起作用。

Answer 2

从position:absolute;

中删除#box

将其添加到#box - margin:0 auto;

摆脱body

中的内容

如何以百分比为中心？

2 个答案:

JSFiddle Demo

JSFiddle Edit