2
請解決這個神祕對我來說。css問題，外部div沒有得到內部的高度
我有最簡單的webform佈局，意義 - 標題，內容和頁腳。 我已經在內容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的高度，它體現在先進的高= 0
感謝。
您可以發佈您爲了方便代碼的的jsfiddle？ – 2012-03-23 07:37:44