CSS相对和绝对定位元素拉伸容器

时间:2012-09-09 16:37:00

标签: css height css-position

你能解决我的困境吗?我有一个容器(在这种情况下是BODY),设置了position:relative。在里面我有两个div。一个relative和一个absolute定位(按此顺序)。

问题是每当我将margin-top设置为relative定位元素时,容器的高度(在这种情况下为body)会垂直拉伸。

例如,即使我已将height: 100%设置为容器,但查看时其大小为{%}} margin-top子元素的relative

这是一个小提琴: http://jsfiddle.net/xJ75R/7/

1 个答案:

答案 0 :(得分:1)

首先,你不应该给身体一个相对位置,因为身体会占据整个页面。

无论如何,在将相对位置应用于另一个元素时要具体,所以如果你有一个“列表”类,那么使用

.lists { position: relative; top: something; left: something }

或保证金,或任何规则。

如果你在为其他元素提供一些余量之后只是遇到身体标签问题(虽然我不知道会发生这种情况),那么给身体一个0的边距,如:

body { margin: 0; }

如果这不起作用,那就使用!important如

body { margin: 0 !important; }

在旁注中,使用firebug插件for firefox,让你的CSS生活更轻松,并看看动态发生了什么。