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

Popular posts from this blog

sqlite3 - UPDATE a table from the SELECT of another one -

c# - Showing a SelectedItem's Property -

javascript - Render HTML after each iteration in loop -