javascript - HTML Dynamic/Responsive Element Positioning -
I am creating a web app in asp.net. The page uses a master and he has only two things 1. Gridview below 2. A DIV at the top which I will develop
In this view, the top devil or header was frozen
This is what I have done so far
& lt; Div class = 'fixed header' & gt; & Lt; / Div & gt; & Lt;% - & lt; Div squares = 'fixed sides' & gt; & Lt; / Div & gt; -% & gt; & Lt; Div class = 'scrollable' & gt; & Lt; Asp: GridView id = "GridView1" runat = "server" AllowPaging = "True" AllowSorting = "True" AutoGenerateColumns = "False" DataKeyNames = "RecordID" datasource id = "history" & gt; & Lt; Columns & gt; & Lt; / Column & gt; & Lt; / ASP: GridView & gt; & Lt; / Div & gt;
css
.scrollable {height: 100%; Width: 100%; Margin: 10% auto 0 auto; Border: 1px dashed black; Status: Relative; } Fixed {status: fixed; } .header {top: 0; Left: 0; Correct: 0; Width: 100%; Min-height: 100px; Background color: white; Top: Auto; }. Side {top: 0; Left: 0; Bottom: 0; Width: 50px; Background color: red; } Consultant Penal {width: 100%; Height: 100%; Status: Relative; }
But if I change the size of the window, the grid overlaps the top div.
I always want a grid to show under the top white block.
I know that I can add top or margin, but it can not automatically adjust in Div dimensions.
This is where I need help.
There is no need to do anything, only . Header fix CSS class
.header {top: 0]; Left: 0; Correct: 0; Width: 100%; Min-height: 100px; Background color: white; Z-index: 1; }
Comments
Post a Comment