CSS 流体布局:当容器宽度增加时，margin-top 基于百分比增长 [英] CSS fluid layout: margin-top based on percentage grows when container width increases

问题描述

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

I'm just learning CSS fluid layouts & responsive design, and I'm trying to use all percentage values with no px values in a layout.

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

So far it seems to be working, but in one spot, I'm seeing something I didn't expect. I'm trying to put a margin between two vertically stacked divs that changes based on the height of the container. I'd expect that margin to change when I resize the window vertically, but it also grows if you resize it horizontally, which I don't want. What am I missing?

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

Here's a fiddle. Thanks for your help in advance.

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

推荐答案

在 CSS 中，所有四个 margin: 和 padding: 百分比都是相对于 width 的……尽管这可能看起来毫无意义.这就是 CSS 规范的方式，您对此无能为力.

In CSS, all four margin: and padding: percentages are relative to the width ...even though that may seem nonsensical. That's just the way the CSS spec is, there's nothing you can do about it.

你能用ex"(或em")做你想做的吗?这就是我习惯于看到指定的边距/填充的流动"值的方式......而且它可能比百分比问题少.(虽然我没有相关的第一手经验，但我怀疑计算的百分比值的极长精度会让你以后遇到浏览器不兼容问题.我的风格是限制 CSS如果可能的话，百分比到整数，或者偶尔可能是小数点后一位，有时甚至是两位数.)

Can you do what you want with 'ex' (or 'em') instead? That's the way I'm used to seeing "fluid" values for margin/padding specified ...and it may be less problematic than percentages. (Although I don't have the relevant first-hand experience, I suspect the extremely long precisions on your calculated percentage values are going to set you up for browser incompatibility problems later. My style is to limit CSS percentages to integers if at all possible, or occasionally perhaps one or sometimes maybe even two digits after the decimal point.)

如果你真的想要一个精确的任意大小的垂直空白空间，它是容器的百分比，我想到的第一件事就是一个单独的空白 <div > 带有 "height: nn%" CSS 规范.或者您指定的其他东西可能已经按照您希望的方式处理垂直尺寸(因为看起来边距在垂直调整大小上根本没有做任何事情).

If you really want an exact arbitrarily-sized empty vertical space that's a percentage of the container, the first thing that comes to my mind is a separate empty < div > with a "height: nn%" CSS specification. Or perhaps something else you're specifying is already handling the vertical sizes they way you wish (since it would appear the margins aren't really doing anything at all on a vertical resize).

这篇关于CSS 流体布局:当容器宽度增加时，margin-top 基于百分比增长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！