请为我解答这个谜团..
我有最简单的网络表单布局，即页眉、内容和页脚。 我在内容 div 中放置了一些 div，其中应该包含弹出菜单。现在内容 div 无法获取菜单 div 的高度，就好像它不是它的儿子一样。但是，菜单 div 确实获取了内容的 div 右边框和左边框。 我使用“检查元素”工具检查，内容 div 的高度为 0。 为什么？为什么？为什么菜单的 div 不被视为内容 div 的子元素。
这里是一些脚本:
<body>
<form id="formMaster" runat="server">
<div id="header">
bla bla
</div>
<div id="main">
<div>
<ucCatMenu:MenuControl ID="CatMenu" runat="server" />
</div>
</div>
<div id="footer">
bla bla
</div>
</form>
</body>
这是菜单的Web用户控制代码(有点长，我只是全部粘贴):
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="wucCategoriesMenu.ascx.cs"
Inherits="Controls_wucCategoriesMenu" %>
<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssmenus.co.uk
Copyright (c) 2009- Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#flyout
{
list-style: none;
margin: 3px 0px 0px;
padding: 0px;
width: 180px;
float: right;
position: relative;
}
#flyout ul
{
list-style: none;
margin: 0px;
padding: 0px;
left: -9999px;
top: 0px;
width: 180px;
height: auto;
position: absolute;
}
#flyout table
{
margin: -1px -10px;
width: 0px;
height: 0px;
border-collapse: collapse;
}
#flyout li
{
margin-bottom: 1px;
float: left;
}
#flyout li a
{
background: rgb(136, 136, 136);
width: 170px;
height: 24px;
text-align: right;
color: rgb(0, 0, 0);
line-height: 24px; /*padding-right: 10px;*/
font-family: arial, sans-serif;
font-size: 11px;
text-decoration: none;
float: left;
display: block;
}
#flyout li a.fly
{
background: rgb(136, 136, 136);
}
#flyout li:hover
{
position: relative;
}
#flyout li a:hover
{
color: rgb(255, 255, 255);
position: relative;
background-color: rgb(238, 102, 0);
}
#flyout li:hover > a
{
color: rgb(255, 255, 255);
background-color: rgb(238, 102, 0);
}
#flyout ul li a
{
background: rgb(170, 170, 170);
}
#flyout ul li a.fly
{
background: rgb(170, 170, 170);
}
#flyout ul ul li a
{
background: rgb(204, 204, 204);
}
#flyout ul ul li a.fly
{
background: rgb(204, 204, 204);
}
#flyout ul ul ul li a
{
background: rgb(221, 221, 221);
}
#flyout li a.current
{
color: rgb(255, 255, 255);
background-color: rgb(204, 68, 0);
}
#flyout ul li a.current
{
color: rgb(255, 255, 255);
background-color: rgb(204, 68, 0);
}
#flyout ul ul li a.current
{
color: rgb(255, 255, 255);
background-color: rgb(204, 68, 0);
}
#flyout ul ul ul li a.current
{
color: rgb(255, 255, 255);
background-color: rgb(204, 68, 0);
}
#flyout :hover ul
{
left: -160px;
}
#flyout :hover ul :hover ul
{
left: -160px;
}
#flyout :hover ul :hover ul :hover ul
{
left: -120px;
}
#flyout :hover ul ul
{
left: -9999px;
}
#flyout :hover ul :hover ul ul
{
left: -9999px;
}
#flyout ul li:hover > a
{
color: rgb(255, 255, 255);
background-color: rgb(238, 102, 0);
}
#flyout ul ul li:hover > a
{
color: rgb(255, 255, 255);
background-color: rgb(238, 102, 0);
}
</style>
<div>
<ul id="flyout">
<li><a class="fly" href="/globalop/pages/CatPage.aspx"><b>category</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url"><b>sub category</b></a></li>
<li><a href="#url"><b>sub category</b></a></li>
<li><a href="#url"><b>sub category</b></a></li>
<li><a href="#url"><b>sub category</b></a></li>
<li class="last"><a href="#url"><b>sub category</b></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="fly" href="/globalop/pages/CatPage.aspx"><b>category</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url"><b>sub category</b></a></li>
<li><a href="#url"><b>sub category</b></a></li>
<li><a href="#url"><b>sub category</b></a></li>
<li><a href="#url"><b>sub category</b></a></li>
<li><a href="#url"><b>sub category</b></a></li>
<li><a href="#url"><b>sub category</b></a></li>
<li class="last"><a href="#url"><b>sub category</b></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
最重要的是，我在页面末尾看到一个很长的滚动条，原始示例(从中获取弹出菜单代码)没有显示。
但我只是想了解为什么“主”div 没有获取菜单 div 的高度并且它显示 height = 0。
提前致谢。
最佳答案
您好，实际上您已经将 float 赋予了子 div，并且没有清除父 div，因此如果您在子 div 中使用 float ，请务必清除父 div...
现在你的主 div 已被清除并且正确地获取了他的高度。
这是更新后的 HTML 和 css 代码 http://jsfiddle.net/Y6KMN/1/
关于css问题，外部div无法获取内部div的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9835540/