コンテンツをページの一番下にプッシュ

私はASP.Netページ上のメニューを使用しています。私のコンテンツをページの一番下までずっとプッシュします。私はそれで見つけた同様の問題について多くの答えを試しましたが、何も動作しません。誰もがポジションを使用すると言う：絶対、しかしこれは動作しません。私はすべてのポジションを試して、別の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; 
}

出典

2016-04-08 KFP

解決：相対と外のdivを作成：位置とMainContentのを有することによりポーズを持つメニュー：絶対的なものと位置を持つメニュー：それはもはや内容を押し下げるものではありません。

<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>

出典

2016-04-08 14:40:48 KFP

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

は、上記のコードが動作するかどうか、私に教えてください

出典

2016-04-08 13:15:09

私が追加したばかりの私のコードに私のコードのすべてが含まれていませんでした。 MainContent、メニュー、パネル、ラベルだけでテストページを作成しましたが、あなたの提案はうまくいきますが、私のページではそうではありません。 – KFP

コンテンツをページの一番下にプッシュ

答えて

関連する問題