Question

我在ASP.Net页面上使用菜单，其方向设置为水平，没有子级别。它将我的内容一直推到页面底部。我已经尝试了许多我在SO上发现的类似问题的答案，但没有任何效果。每个人都说使用位置：绝对，但这不起作用。我已尝试过每一个位置，并将其置于另一个div中，但无济于事。

<body>
<form id="form1" runat="server">
<div id="wrapper" >
        <div id="Main">
            <div id="MainHeader">

            </div>
            <div id="MainMenu">

            </div>
            <div id="MainContent">
                <asp:Menu ID="nav" runat="server" Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Projects.aspx" Text="Search" Value="Search"></asp:MenuItem>
                        <asp:MenuItem NavigateUrl="~/ProjectGeneral.aspx" Text="General Info" Value="General Info"></asp:MenuItem>
                        <asp:MenuItem NavigateUrl="~/ProjectSchedule.aspx" Text="Schedule" Value="Schedule"></asp:MenuItem>
                        <asp:MenuItem NavigateUrl="~/ProjectNotes.aspx" Text="Notes" Value="Notes"></asp:MenuItem>
                    </Items>
                </asp:Menu>

                Project: General Information
                <asp:Panel ID="Panel1" runat="server" BackColor="#EADD96">
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                </asp:Panel>
            </div>
        </div>
        <div id="map" >

    </div>
    </div>
</form>

CSS：

#wrapper {
outline-style:solid;
outline-color: Black;
outline-width:thin;
}
#Main {
width: 50%;
height: 870px;
/*background: blue;*/
float: left;
}
#MainHeader {
width: 100%;
height: 70px;
background: #D8D8D8 ;
}
#MainMenu {
width: 20%;
height: 800px;
background-color:darkgray;
float: left;
}
#MainContent {
background-color:beige;
height: 800px;
margin-left: 20%;
font-family: 'MoolBoran';
font-size:22px;
padding-left: 10px;
padding-right: 10px;
margin-top:0px;
}
#map {
margin-left: 0%;
height: 870px;
background-color: White;
}
#nav {
position:absolute;
top: 10px;
 }

Answer 1

#MainContent {
    position: relative;
}
#nav {
    position: absolute;
    top: 10px;
}

如果上述代码有效，请告诉我

Answer 2

解决：通过使MainContent与position：relative并在菜单外创建一个div，其中postion：absolute和菜单有position：relative它不再推送内容。

<div id="MainContent">
    <div id="NavDiv">
            <asp:Menu ID="nav" runat="server" Orientation="Horizontal">
                <Items>
                    <asp:MenuItem NavigateUrl="~/Projects.aspx" Text="Search" Value="Search"></asp:MenuItem>
                    <asp:MenuItem NavigateUrl="~/ProjectGeneral.aspx" Text="General Info" Value="General Info"></asp:MenuItem>
                    <asp:MenuItem NavigateUrl="~/ProjectSchedule.aspx" Text="Schedule" Value="Schedule"></asp:MenuItem>
                    <asp:MenuItem NavigateUrl="~/ProjectNotes.aspx" Text="Notes" Value="Notes"></asp:MenuItem>
                </Items>
            </asp:Menu>

            Project: General Information
            <asp:Panel ID="Panel1" runat="server" BackColor="#EADD96">
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </asp:Panel>
        </div>
    </div>

菜单将内容推送到页面底部

2 个答案: