CSS Layout help... RSS

• • Reply
  

  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:

  <div id="container">
     <div id="header"></div>
     <div id="body"></div>
     <div id="footer"></div>
  </div>

  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!

• • Reply
  

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

  
  
  

  • Marked as answer by Yanping Wang - MSFT on Dec 27, 2012 08:27 AM
• • Reply
  

  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.

  Please "Marks As Answer" if any answer helped you out!
  ~~! FIREWALL !~~
• • Reply
  

  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.

• • Reply
  

  Afzaal.Ahmad...

  Contributor

  2661 Points

  1040 Posts

  Re: CSS Layout help...

  Dec 21, 2012 01:35 PM|LINK

  Ok. Try posting a new string.

  Please "Marks As Answer" if any answer helped you out!
  ~~! FIREWALL !~~