Struggling to position my sidebar at the bottom of the page without using fixed positioning, as I don't want the buttons to scroll along with it. I simply want the background to extend to the bottom of the scrollable page. Despite trying various "solutions," I've only managed to get the background to either extend to the visible page or wrap around the buttons. Additionally, setting a fixed height like 'height: 3000px' won't work due to different screen resolutions.
This issue is within a Master Page.
Current layout can be seen here: http://prntscr.com/7dpa8j
ASP code in 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%;
}