Products

Evoq Content Overview Content Creation Workflow Asset Management Mobile Responsive Personalization Content Analytics SEO Integrations Security Website PerformanceEvoq Engage Overview Community Management  Dashboard  Analytics  Member Profile Gamification Advocate Marketing Community Engagement  Ideas  Answers  Discussions  Groups  Wikis  Events Mobile ReadyDNN Support PackagesEvoq: CMS FeaturesEvoq OnDemandCompare DNN's CMS Products

Solutions

Content Management SystemMulti-Channel PublishingDigital MarketingOnline Community ManagementIntranet Software SolutionOur CustomersPrime

Resources

Test DrivesSchedule A DemoDocumentation CenterWebinarsWhite PapersProduct ManualsRequest PricingData SheetsCase StudiesEvoq Preferred Products Content Management Ecommerce Forms Identity Management and Authentication Site Management Social Themes

Partners

DNN Partners Partner Directory Become a DNN Partner Partner Program Overview  Hosting  Implementation  ISV  Training  Competencies

Community

Participate Ask a Question Forums Community Showcase DNN MVP  Program Overview  Lifetime MVPs  Honorary MVPs Subscribe to DNN Digest Advisory Groups  Awareness Advisory Group  Developer Advisory Group  Partner Advisory Group  Technology Advisory GroupLearn Documentation Wiki Community Blog Video Library Project History Development RoadmapDownload DNN Store Language Packs Manuals Nightly BuildsSecurity Policies Security Center

Blog

About

News Press Releases News Coverage Press KitCareersContact DNN

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...CSS Skinning.... 100% height?CSS Skinning.... 100% height?
Previous
 
Next
New Post
7/27/2008 12:53 AM
 
Mike Horton


Joined: 7/16/2003
Posts: 4865

I'm so close and yet so far. I've got the footer resting on the botton like I wanted thanks to the FooterStickAlt link (thanks Parsley) but the border on my content area will not drop down to meet the footer area. Following the instructions for the FooterStickAlt if I pull the "*" from *html nonFooter{height: 100%} then the content borders extend 200+ pixels below the footer (I'm guessing that's the total height fo the footer area (100 pixels) and the header/menu area. I've put the html for the skin up at http://www.gmss.org/mikeh/new/index.html with a link to the source files and a screenshot of what it looks like without the *html line. If someone would be willing to look at it and tell me where I'm going wrong I'd appreciate it.

BTW what's the * in the .css file supposed to do anyway?
 
New Post
7/28/2008 6:41 AM
 
Matthew Gahan

www.bizarc.com
Joined: 2/10/2003
Posts: 22

There is an error in your css.
*html #nonFooter_pad{height: 100%;}  ... there should be a space between * and html. This line currently is looking for a tag *html which obviously won't match on anything.

* is wild card that will apply to ALL tags, use with care. Very handy for zeroing margin and padding values when browser is in 'quirks' mode.
 
New Post
7/28/2008 11:06 AM
 
Mike Horton


Joined: 7/16/2003
Posts: 4865

Thanks Matthew. That was a typo from when I was trying it with and without the * and the last time I added it in I must've missed the space. Even with the space there it doesn't do it.

I did find something interesting last night though. I did a google search on 100% height and xhtml1-transitional.dtd and from what I found it's not supported no matter how you do it. I'd have to find the page again and if I have time today I will (or I'll look in my browser history when I get home tonight) but it appears that I may be hosed.
 
New Post
7/28/2008 2:20 PM
 
Matthew Gahan

www.bizarc.com
Joined: 2/10/2003
Posts: 22

There was something else missing from your css. #nonFooter_pad has no height:100%; if you set that you will see the height extenting the full lenght of the page.... in your skin this creates a rather strange effect as the footer is overlaped by the #nonFooter_pad div....

A better (and simpler) approach in my humble opinion is to have a 100% height page frame... make that relative... and place your footer bar inside the frame and attach it to the bottom with position:absolute; bottom:0; left:0; . 

As with widths the problem width percentages is that there is inconsistant calaculation between browsers .... Especialy IE 6  . On top of that you end up with problems with mixing fixed height or width elements with percentages.... nothing to do with browser support of course, just mathematics.

100% does work as long as *Each and every* tag in the heirachy from html down has 100% height set.... The problem with all of this is that it just isn't as intuative as it seems... for example if you wanted the 'content' tag to expand out to fill the page... then you have to think again as adding height:100% to this tag will fill the whole vertical frame.... Then the only way to make divs stack properly in a 100% frame is to have *ALL* the div's total 100%. This works perfectly and is totaly cross browser safe.... but makes for awkward designs.

So the way to use this is style the background 'pagewrap' for the length of the page, attach the footer (accepting that it will overlap elements when the page is shrunk), and then allow all the content to act in the normal page flow...expanding as it requires.

This html page shows the cross browser safe XHTML supported effect in action;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style type="text/css">
    html, body {
        height:100%;
     }
     .pagewrap
     {
         position:relative;
         width:800px;
         margin:0 auto;
           height:100%;
     }
     .head
     {
         height:200px;
         background-color:red;
     }
     .content
     {
         background-color:blue;
         padding-top:200px;
         padding-bottom:50px;

     }
     .footer
     {
         position:absolute;
         bottom:0;
         left:0;
         width:100%;
         height:50px;
         background-color:green;
     }
    </style>
</head>
<body>
<div class="pagewrap" >
    <div class="head">header</div>
    <div class="content" >content</div>
    <div class="footer">footer</div>
</div>
</body>
</html>
 
New Post
7/29/2008 12:46 AM
 
Mike Horton


Joined: 7/16/2003
Posts: 4865

Matthew, I just copied the page you posted above into a fresh page and I'm getting the same result that I've been seeing all along. The content area still doesn't fill the total whitespace between the header and the footer which was my original problem.

Oh and I found the link I was mentioning earlier. I was mistaken, it's 100% height tables.... http://www.webmasterworld.com/html/3364340.htm
 
 Page 2 of 4
Previous1234Next 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...CSS Skinning.... 100% height?CSS Skinning.... 100% height?


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out