Tech or Treat! Write an article about your scariest tech disaster to win gadgets!Learn more

x
?
Solved

100% page height not working on certain pages

Posted on 2012-03-15
5
Medium Priority
?
265 Views
Last Modified: 2013-05-15
I've got a strange problem where the middle section of some of the pages aren't stretching to 100% page height, wihch results in there not being the full left hand border.

Here for example (please click on the 'Brentwood' link and go to 'Login' on the top menu) https://www.inside-guides.co.uk/advertiseradmin/default.asp?.

Whereas the 'Contact' page is fine (again via the 'Brentwood' site): https://www.inside-guides.co.uk/feedback.asp.

They both use the same template and CSS, but when I look in the code inspector it gives full page height values for the #left-nav and #middle on the 'Contact'page which works.

I really can't understand why so any help perhaps using a code inspector would be very much appreciated... Please let me know if I can provide any more useful code.

CSS:

#middle {padding-top:7px;float:left;width:60%;border-right:1px solid #edeaec;border-left:1px solid #ede9e8;}
#middle.dir {width:78.5%;border-right:0;}

Open in new window

0
Comment
Question by:UName10
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 37726142
Your links don't work.

The problem with using 100% page height is that some browsers do not automatically assign 100% of the window height to the body or html elements of the page so 100% becomes 100% of the body height which is 100% of the html height.

Try adding:
html, body { height: 100%; }

Open in new window

to the beginning of your css file. This makes the html element 100% of it's parent height (the window) and body 100% of it's parent height (html).
0
 

Author Comment

by:UName10
ID: 37726322
Hi i'm really sorry I just tried to edit the question - I also used javascript in Head.css to make each column the same height = i.e. to the top of the footer, but it doesn't work on the Login page - maybe that would help!  It's just not working on the login page and I don'tknow why because the Head.css & javascript is an include on every page:

<script type="text/javascript">
matchColumns=function(){ 
     var divs,contDivs,maxHeight,divHeight,d; 
     divs=document.getElementsByTagName('div'); 
     contDivs=[]; 
     maxHeight=0;  
     for(var i=0;i<divs.length;i++){  
          // make collection with <div> elements with class attribute "equal"
          if(/\bequal\b/.test(divs[i].className)){ 
                d=divs[i]; 
                contDivs[contDivs.length]=d;  
                if(d.offsetHeight){ 
                     divHeight=d.offsetHeight;                  
                } 
                else if(d.style.pixelHeight){ 
                     divHeight=d.style.pixelHeight;                  
                } 
                maxHeight=Math.max(maxHeight,divHeight); 
          } 
     } 
     for(var i=0;i<contDivs.length;i++){ 
          contDivs[i].style.height=maxHeight + "px"; 
     } 
}  
window.onload=function(){ 
     if(document.getElementsByTagName){ 
          matchColumns();            
     } 
} 
</script>

Open in new window

0
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 2000 total points
ID: 37726454
In HTML/CSS, anything specified as a percentage means a percent of the element that contains it.  You can't have a percentage of an undefined height.  This code is from another question about 100% height.  You can change it around to see how the pieces work.

<!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>100% Height</title>
<meta name="author" content="remorina" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
* {
	margin:0px;
	padding:0px;
	border:0px;
	}

html {height:100%;}
body {
        height:100% !important;
        background-color:#abcdef;
        font:11px Tahoma, "Lucida Grande", "Lucida Sans Unicode", Verdana;
        min-width:990px;
}

/****************** MAIN LAYOUT ****************************/
#header {
        background:#779977;
        height:141px;
        color:#FFF;
        width:100%;
}

#footer {
        clear:both;
        background:#000080;
        width:100%;
        height:44px;
        color:#FFFFFF;
}

#container{
   height:70%;
   border:5px solid green;
   overflow:hidden;
}

#sidebar {
        float:left;
        width:19%;
        height:100%;
        background-color:#f0f0f0;
        border-right:1px solid #cccccc;
}

#content {
        float:left;
        width:80%;      
}
</style>
</head>
<body>
    <div id="header">
        <div class="inner">
            THIS IS HEADER
        </div>
        <!--ends .inner -->
    </div>
    <!--ends #header -->
    <!-- CONTENT STARTS HERE -->
    <div id="container">
        <!--SIDEBAR STARTS HERE-->
        <div id="sidebar">
            <div class="inner">
                THIS IS SIDEBAR
            </div>
            <!--ends .inner -->
        </div>
        <!--ends #sidebar -->
        <!--CONTENT STARTS HERE-->
        <div id="content">
            <div class="inner">
                THIS IS CONTENT
                <br /><br /><br /><br /><br /><br />
                test
            </div>
            <!--ends .inner -->
        </div>
        <!--ends #content -->
        <div class="clear">
        </div>
    </div>
    <!--ends #container -->
    <div id="footer">
        <div class="inner">
            THIS IS FOOTER
        </div>
        <!--ends .inner -->
    </div>
    <!--ends #footer -->
</body>
</html>

Open in new window

0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 37726661
So, you aren't actually using a css style of "100%" for height, right? Instead you're using javascript to determine the tallest column and setting the others to match. Am I correct?

Please post a working link to the page.
0
 

Author Comment

by:UName10
ID: 37726698
Hi there, yes that's correct - sorry if I wasn't clear.  Any idea why it wouldn't be working, maybe some kind of JS conflict?  I put the links in the question up top, and it's working on the Contact page (feedback.asp), but not on the Login page (advertiseradmin.asp)

Many thanks
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

647 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question