Currently working on an ASP.NET web app that utilizes a Master, with just a GridView at the bottom and a DIV at the top for further development.
The goal is to keep the top DIV or header fixed while scrolling, ensuring it remains in place at the top of the page.
This is the current layout:
<div class='fixed header'>
</div>
<%--<div class='fixed side'></div>--%>
<div class='scrollable'>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="RecordID" DataSourceID="History">
<Columns>
</Columns>
</asp:GridView>
</div>
CSS
.scrollable {
height: 100%;
width: 100%;
margin: 10% auto 0 auto;
border: 1px dashed black;
position:relative;
}
.fixed {
position: fixed;
}
.header{
top: 0;
left: 0;
right: 0;
width:100%;
min-height: 100px;
background-color: white;
top:auto;
}
.side {
top: 0;
left: 0;
bottom: 0;
width: 50px;
background-color: red;
}
.controlPanel{
width:100%;
height:100%;
position:relative;
}
However, when resizing the window, the grid overlaps the top div.
I want the grid to always stay below the top white block.
Solutions involving setting a static top or margin may not adapt well to changes in dimensions.
Any assistance would be greatly appreciated.