我正在尝试设计一个相对定位div
的 ,它又包含两个div
s。没有一个 childdiv
有固定的高度,但是它们会随着内容的变化而变化,所以 parentdiv
会随着 child div 的更高而扩展。现在设计工作正常,但是当我用 Firebug 分析代码时,我看到在 Firebug 中将鼠标悬停在body
标签上时,整个屏幕顶部只有一小部分显示为主体。侧面板确认,body的宽度还可以,但高度为0。这意味着父级的高度div
为0,但Firebug告诉我不是,大约是560px。这怎么可能?我知道如果内容是绝对定位的,元素不会随内容扩展,但这里的孩子div
s 是相对定位的,那么为什么 parent 不随内容展开呢?小提琴位于http://jsfiddle.net/Cupidvogel/y79NS/6/。截图(请放大以理解我的观点!这是我在 Firefox 中尝试将代码作为完整的 HTML 页面时):
问问题
1935 次
2 回答
4
在您的 CSS 中,div.clear
您用来尝试清除浮动的 CSS 本身是向左浮动的。这意味着它也不是文档流的一部分,因此无法清除任何内容。
删除float
可以解决问题:
.clear { width: 400px; clear: both; position: relative; }
或者,如果您想div.clear
因某种原因被浮动,还有很多其他方法可以清除您的浮动。
编辑:div.main
高度为 520px,因为它是浮动的,并且浮动元素“捕捉”到其子项的尺寸。如果您body
向左浮动(请不要;这不是一个好主意),它也会“捕捉”到其子级的尺寸并设置为 520 像素的高度。
于 2012-08-03T13:21:50.087 回答
1
这里发生的是正常的浏览器行为,您浮动 div,因此由于 float 属性,“正常”流程中不再存在。所以 body 的高度为 0,因为 body 无法计算“不在其中”的元素的高度。
将 div class="clear" 移出 div class="main" 并删除 div class="clear" 上的 float 属性,问题解决。
查看:http: //jsfiddle.net/y79NS/8/
于 2012-08-03T14:00:27.710 回答