如何使div扩展到可滚动页面的底部? ASP

时间:2015-06-06 05:34:30

标签: html css asp.net

我一直试图让我的侧边栏到页面底部,我不希望它被定位,因为那时按钮会滚动并且我不想要它。我只想将背景扩展到可滚动页面的底部。我已经尝试了多个“解决方案”,而我唯一的两个结果是背景延伸到可见页面的底部或者只是按钮周围......所以是的。我也希望它像高度:3000px,因为屏幕分辨率不同。

这是在母版页

它是怎样的:http://prntscr.com/7dpa8j

主页的ASP:

<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%;
}

1 个答案:

答案 0 :(得分: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;

}