当窗口高度减小时，margin-top 百分比不会改变[重复]

Posted 2023-03-05

【中文标题】当窗口高度减小时，margin-top 百分比不会改变[重复]

【英文标题】：margin-top percentage does not change when window height decreases [duplicate]

【发布时间】：2011-11-08 03:27:39

【问题描述】：

我正在做一个项目，在该项目中，客户希望导航 <div> 根据屏幕高度对齐，类似于屏幕宽度减小时 margin-left 作为百分比的工作方式。

所以，我给了margin-top: 20% 和导航<div> 显示该边距，但是当我减小窗口的高度时，它不会根据屏幕高度进行调整，尽管当我减小屏幕宽度时它可以工作。

我的问题不是如何我可以做到这一点，而是为什么百分比是水平的而不是垂直的？

这里是一个例子：http://jsfiddle.net/sandeep/5VReY/

【问题讨论】：

非常奇特，似乎 20% 与宽度相关而不是高度（当我改变宽度时，margin-top 改变），也许 CSS 怪胎之一能够回答这个问题（它实际上可能是一个错误）。

@Rikudo;是的，可能是一个错误，但如果有人向我解释为什么没有发生并提供文章链接，那就更好了

@Rikudo：这并不奇怪，它完全符合 css w3 规范。有关规格，请参阅w3.org。

【参考方案1】：

百分比适用于容器块的宽度，根据 css 规范

百分比是相对于宽度计算的 生成框的包含块。 请注意，这适用于 'margin-top' 和 'margin-bottom' 也是如此。

更多信息请参见w3.org。

【讨论】：

感谢 arjan 提供的链接 :)

w3c 里的人抽烟喝什么？我不敢相信清醒的人可以将 margin-top 和 margin-bottom 绑定到宽度而不是高度。

@RomanO，也许他们开枪了？

@RomanO ：将边距与包含块高度的百分比联系起来可能会以无限递归结束，因为它们在某些情况下也会改变高度。

肯定存在巨大的设计缺陷。如果您想要始终相等的边距，则使用像 EM 这样的单位，它是相对于像字体大小这样的单一尺寸的单位。与 EM 一样，百分比是相对单位，但与 EM 不同的是，百分比是相对于两个潜在维度——宽度或高度。将其视为始终相对于宽度，即使在与 HEIGHT 相关的字段上，不仅非常不直观，而且还无法将子元素折叠到 -100% 的边距以使其“像抽屉一样向上滑动”隐藏它是父母。糟糕，糟糕，糟糕的设计缺陷。

【参考方案2】：

您可以在“自动”中播放具有边距道具的宽度顶部/底部属性；

如果你有这样的块：

<div class="centered"></div>

它可以像这样垂直居中：

.centered 
    width: 100px; height: 100px; /* must be present. No matter the value */
    position: absolute;          /* to props top/bottom take effect */
    margin: auto;                /* here's the magic. */

    bottom: 0px; top: 0px;       /* This is how you center a block verticaly */

水平对齐宽度左/右属性也可以实现相同的效果。你也可以有一个偏移量来覆盖块中心以外的其他点。

在这里，我为您提供一些示例，说明结合这些属性可以做什么以及如何做。 http://jsfiddle.net/SQDJ6/

【讨论】：

难以置信，它的工作原理和愚蠢的简单！你有关于浏览器支持的统计吗？

这是一个很好的提示，解决了我的问题。