Question

请向我解开这个谜......

我有最简单的webform布局，意思是 - 标题，内容和页脚。我在内容div中放置了一些div，它假设包含弹出菜单。现在内容div没有得到菜单div的高度，好像它不是它的儿子。但是，菜单div确实获取内容的div左右边框。我检查'inspect element'工具，内容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>

这是菜单的网络用户控制代码（有点长，我只是将其全部粘贴）：

<%@ 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的高度而且显示高度= 0.

先谢谢。

Answer 1

嗨，实际上你已经给了孩子div并且不清楚你的父div，所以如果你在儿童div中使用浮动，那么总是清楚父div ...

所以现在你的主要部分已被清除，并且正确地占据了他的身高。

以下是您更新的HTML和CSS代码http://jsfiddle.net/Y6KMN/1/

的小提琴

Answer 2

那是因为你的flyoutmenu有属性float:right;

所以这个元素不再存在于流中，并且父元素没有高度。

在你的flyoutmenu之后把它告诉浏览器取消浮动并继续正常的方式。

<div style="clear:both;"></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 style="clear:both;"></div>
    </div>
    <div id="footer">
        bla bla
    </div>
    </form>
</body>

Answer 3

你可以使用继承来解决这个问题

<div class="div1" style="width:inherit; height:inherit">

它的样本在方便时使用它......：）

css问题，外部div不会得到内部的高度

3 个答案: