Margin-top: 100% 获取父宽度值...奇怪答案

【问题标题】：Margin-top: 100% gets parent width value... strangeMargin-top: 100% 获取父宽度值...奇怪
【发布时间】：2011-12-01 11:25:46
【问题描述】：

在大多数浏览器（即 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 将更改为相同的值。我不知道这怎么可能，高度变成宽度。无论如何，也许你中的一个可以解释一下发生了什么？

最好的问候 ;)

【问题讨论】：

标签： html css width

【解决方案1】：

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

试过margin-top: 90vh;？

【讨论】：

【解决方案2】：

这与你在 bDiv 上的 CSS 有margin-top: 100%;有关

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

【讨论】：

我很清楚如何解决这个问题，但是我很好奇为什么垂直百分比从水平父宽度中获取价值。这没有任何意义......
请参考卡松的回答

【解决方案3】：

这其实是according to the spec

百分比是相对于宽度计算的生成框的包含块。请注意，这适用于 'margin-top' 和 'margin-bottom' 也是如此。如果包含块的宽度取决于此元素，则生成的布局未定义在 CSS 2.1 中。

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

【讨论】：

我在做完全不同的事情，但是由于浏览器并不总是按预期工作，我正在测试完全随机的属性，因为 margin-top: 100% 有点傻。我在（垂直）边距顶部/边距底部和（水平）宽度之间得到了奇怪的相关性。正如你所说，非常没用;）
什么样的白痴把这个放在标准中..那是..几乎令人难以置信的愚蠢，基于水平值的垂直百分比。
@Noishe 有some speculation 表示这是一个技术限制，由于 DOM 元素的流动。
这是一个奇怪的选择，但绝对不是无用的，尤其是当您希望高度与宽度匹配时。许多应用程序，包括大多数“卡片”实现；）

【解决方案4】：

#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。

【讨论】：

我很清楚如何解决这个问题，但是我很好奇为什么垂直百分比从水平父宽度中获取价值。这毫无意义……