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中，所有四个边距和填充：百分比相对于<宽度 ...即使这可能看起来荒谬。这只是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'）做你想要的吗？这是我习惯看到流体值的margin / padding指定...，它可能不如百分比问题。 （虽然我没有相关的第一手经验，但我怀疑的计算百分比值的极长的精度将为您设置您的浏览器不兼容问题后，我的样式是限制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屋！