CSS流体布局：当容器宽度增加时，基于百分比的边距顶部增加[重复]

Posted 2023-03-05

【中文标题】CSS流体布局：当容器宽度增加时，基于百分比的边距顶部增加[重复]

【英文标题】：CSS fluid layout: margin-top based on percentage grows when container width increases [duplicate]

【发布时间】：2012-05-24 15:36:47

【问题描述】：

我只是在学习 CSS 流体布局和响应式设计，我正在尝试在布局中使用所有没有 px 值的百分比值。

到目前为止，它似乎正在发挥作用，但在某个地方，我看到了一些我没想到的东西。我试图在两个垂直堆叠的 div 之间放置一个边距，这些 div 会根据容器的高度而变化。我希望当我垂直调整窗口大小时，边距会改变，但如果你水平调整它的大小，它也会增长，这是我不想要的。我错过了什么？

这是一个小提琴。提前感谢您的帮助。

http://jsfiddle.net/gregir/aP5kz/

【问题讨论】：

CSS vw 的视口单位，vh 1vw = 视口宽度的 1% 1vh = 视口高度的 1%

【参考方案1】：

是的，这是出乎意料且违反直觉的，但它按设计工作，我不知道为什么它会这样工作。见margin-top percentage does not change when window height decreases

【讨论】：

很奇怪。很抱歉，我之前在 Stack 搜索中错过了这个。不知道如何解决这个问题，但我想我最好考虑一下。谢谢。

【参考方案2】：

在 CSS 中，所有四个 margin: 和 padding: 百分比都是相对于 width ...即使这看起来很荒谬。这就是 CSS 规范的方式，你无能为力。

你能用“ex”（或“em”）做你想做的事吗？这就是我习惯于看到指定边距/填充的“流动”值的方式......而且它可能比百分比问题更少。 （虽然我没有相关的第一手经验，但我怀疑您计算的百分比值的超长精度会在以后为您设置浏览器不兼容问题。我的风格是限制 CSS如果可能的话，将百分比转换为整数，或者有时可能是小数点后一位，有时甚至可能是两位数。）

如果你真的想要一个精确的任意大小的空垂直空间，它是容器的百分比，我首先想到的是一个单独的空 具有“高度：nn%”的 CSS 规范。或者您指定的其他东西可能已经按照您希望的方式处理垂直尺寸（因为看起来边距在垂直调整大小时根本没有做任何事情）。

【讨论】：

谢谢，查克。我真的需要为边距使用百分比值，因为我正在构建的界面会从大到小波动很大，如果我的大元素变得非常小但它们之间有 1em 的边距，它看起来很奇怪。关于长精度值，我从 A List Apart (alistapart.com/articles/fluid-images) 提出了这个想法，实际上并没有计划在生产中使用它们。无论如何，你的建议是：一个空的 div 就可以了；它很简单/优雅，希望我自己能想到。再次感谢！

***.com/questions/11003911/…

@Mr. TA - 我明白为什么规范是这样的。如果将顶部和底部边距百分比更改为相对于 height，而左右边距百分比保持相对于 width，则无法指定边距（和填充）与百分比，但也让它们等于。 （这也是保持元素纵横比的奇怪 CSS hack 的基础。）这些都是艰难的选择；在你断定它们只是一个“设计缺陷”之前深吸一口气。

@ChuckKollars 我认为他们可以通过两种方式做到这一点：高度与边距不同。我理解他们为什么做出这个选择，但我仍然不同意。

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