2015-06-06 3 views
0

Я пытался получить боковую панель в нижней части страницы, я не хочу, чтобы она была зафиксирована, потому что тогда кнопки будут прокручивать, и я не хочу этого. Я просто хочу, чтобы фон расширялся до нижней части прокручиваемой страницы. Я пробовал несколько «Решений», и только два результата, которые у меня были, это то, что фон распространяется на нижнюю часть видимой страницы или вокруг кнопок ... так что да. Я также хочу, чтобы он был как высота: 3000 пикселей, из-за разных разрешений экрана.Как сделать div простирающимся до нижней части прокручиваемой страницы? ASP

Это в мастер-странице

Как это: http://prntscr.com/7dpa8j

ВРУ Masterpage:

<body> 

<form id="form1" runat="server"> 
    <asp:ScriptManager ID="mainSM" runat="server" /> 

     <div id="header"> 
      <asp:ContentPlaceHolder ID="ContentHolderDD" runat="server"> 

      </asp:ContentPlaceHolder> 
      <div> 
       <p id="teamNames" class="regularTextWhite">Tom, Rutger & Mike</p> 
      </div> 

      <img id="logo" src="../../Images/top2000.gif" /> 
      <div> 
       <p id="welcomeMessage" class="regularTextWhite" runat="server">Welkom FIRST_NAME</p> 
      </div> 
      <asp:Button ID="btnLogout" text="Uitloggen" runat="server" CssClass="btnRed" Visible="false" OnClick="btnLogout_Click"/> 
      <asp:Button ID="btnLogin" text="Inloggen" runat="server" CssClass="btnRed" OnClick="btnLogin_Click" />  
     </div> 
     <div id="sidebar"> 
      <div id="sideMenu" runat="server"> 
       <asp:Button ID="btnList" text="Lijst" runat="server" CssClass="btnClean" PostBackUrl="~/Pages/Pages/List.aspx"/> 
       <asp:Button ID="btnArtists" text="Artiesten" runat="server" CssClass="btnClean" PostBackUrl="~/Pages/Pages/Artists.aspx"/> 
       <asp:Button ID="btnSongs" text="Lietjes" runat="server" CssClass="btnClean" PostBackUrl="~/Pages/Pages/Song.aspx"/> 
      </div> 
     </div> 
     <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> 
     </asp:ContentPlaceHolder> 
</form> 
</body> 

CSS:

#sidebar { 
background-color: white; 
border-right: 1px solid rgb(100, 100, 100); 
width: 250px; 
height:1000px; 
float:left; 
overflow-y:auto; 
position:relative; 

} 

#sidemenu { 
height:100%; 
} 
+0

Если изменить жерех к соответствующему/необходимой только HTML и подготовить демо (plunkr, pen.io, jsfiddle) легче помочь и, следовательно, более вероятно, ([хороший вопрос] (HTTP: // stackoverflow.com/help/how-to-ask)) – surfmuggle

ответ

0

высота SET: 100vh;

#sidebar { 
background-color: white; 
border-right: 1px solid rgb(100, 100, 100); 
width: 250px; 
height:100vh; 
float:left; 
overflow-y:auto; 
position:relative; 

} 
Смежные вопросы