In the body, depending on the page, my content is either one or two (stacked) gridviews. Each gridview is wrapped in a DIV on it's own page. What I'd like to do is have the Header and Footer always stay on the page, while the GridView shows more or fewer
rows depending on the size of the window. With the page that has 2 gridviews, I'm OK with making the top one fixed in size.
In ASP.NET the footer and header are rendered on their own positions.
So you need to set their position as you need to. Because the footer is on end it will be displayed out of the current area sections.
So you need is to set a position for the footer like :
.footer {
position: fixed;
}
Other elements as you like. The header will also stay on top (I mean it will flow out of the page if user scolls down) So you need to set its position as fixed too. In case if you want to let the header and footer on the page.
Please "Marks As Answer" if any answer helped you out!
~~! FIREWALL !~~
LMychajluk
Member
2 Points
9 Posts
CSS Layout help...
Dec 20, 2012 08:48 PM|LINK
I've been looking for an example of this, but can't seem to find one.
I have a master page file that basically has this type of layout in it:
In the body, depending on the page, my content is either one or two (stacked) gridviews. Each gridview is wrapped in a DIV on it's own page. What I'd like to do is have the Header and Footer always stay on the page, while the GridView shows more or fewer rows depending on the size of the window. With the page that has 2 gridviews, I'm OK with making the top one fixed in size.
I thought this was going to do it, but the Footer scrolls off the page - http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page (doesn't 'keeping footers at the bottom of the page' mean what it says?).
Can anyone point me at a link with a tutorial that may get me to where I'd like to be? Thanks!
amr ragab
Member
57 Points
64 Posts
Re: CSS Layout help...
Dec 20, 2012 09:19 PM|LINK
try this
html, body { margin:0; padding:0; height:100%; } #container { min-height:100%; position:relative; } #header { background: #ff0; padding: 10px; position: fixed; top: 0px; width: 100%; } #body { padding:10px; padding-bottom:60px; /* Height of the footer */ } #footer { position: fixed; bottom: 0; width: 100%; height: 60px; /* Height of the footer */ background: #6cf; }Afzaal.Ahmad...
Contributor
2661 Points
1040 Posts
Re: CSS Layout help...
Dec 21, 2012 01:16 PM|LINK
In ASP.NET the footer and header are rendered on their own positions.
So you need to set their position as you need to. Because the footer is on end it will be displayed out of the current area sections.
So you need is to set a position for the footer like :
.footer { position: fixed; }Other elements as you like. The header will also stay on top (I mean it will flow out of the page if user scolls down) So you need to set its position as fixed too. In case if you want to let the header and footer on the page.
~~! FIREWALL !~~
LMychajluk
Member
2 Points
9 Posts
Re: CSS Layout help...
Dec 21, 2012 01:33 PM|LINK
Thanks, guys. I'm out of the office today, but will try it out on Monday and let you know how it works out.
Afzaal.Ahmad...
Contributor
2661 Points
1040 Posts
Re: CSS Layout help...
Dec 21, 2012 01:35 PM|LINK
Ok. Try posting a new string.
~~! FIREWALL !~~