Question

我对大多数浏览器（即ff，chrome，safari）都有一个非常奇怪的“问题”。以下是示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        html{
            outline: 1px #0ff solid;
            background: rgba(0,255,255,0.1);
        }
        body{
            margin: 0;
            padding: 0;
            outline: 1px #00f solid;
            background: rgba(0,0,255,0.1);
        }
        #aDiv{
            width: 300px;
            outline: 1px #f00 solid;
            background: rgba(255,0,0,0.2);
        }
        #bDiv{
            margin-top: 100%;
            outline: 1px #0f0 solid;
            background: rgba(0,255,0,0.1);
        }
    </style>
</head>
<body>
    <div id="aDiv">
        <div id="bDiv">
            content
        </div>
    </div>
</body>
</html>

当您更改#aDiv宽度时，＃bDiv margin-top将更改为相同的值。我不知道它是如何可能的，高度是宽度。无论如何，也许你可以解释一下我在做什么？

最好的问候;）

d

Answer 1

这实际上是according to the spec

＆LT;百分比＆GT;百分比是根据宽度计算的生成的框包含块。请注意，这是真的 'margin-top'和'margin-bottom'也是如此。如果包含块的话 width取决于此元素，然后生成的布局未定义在CSS 2.1中。

相当无用，对吧？您是否考虑过使用position: absolute和bottom: 0？它们可能更符合您的需求。

Answer 2

您可以尝试视口相对单位（1vw =视口宽度的1％，1vh =视口高度的1％）。

尝试margin-top: 90vh;？

Answer 3

#bDiv{
        margin-top: 100%; --> This need to change
        outline: 1px #0f0 solid;
        background: rgba(0,255,0,0.1);
    }

这不是一个奇怪的问题。这是因为您已将margin-top设置为100％，因为aDiv是bDiv的父级，因此aDiv的宽度为margin-top。

Answer 4

这与bDiv上具有margin-top: 100%;

的CSS有关

如果你删除它，一切都恢复正常。

保证金顶部：100％获得父宽度值...奇怪

4 个答案: