asked on 100% page height not working on certain pages
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.
Whereas the 'Contact' page is fine (again via the 'Brentwood' site): https://www.inside-guides.
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:
Here for example (please click on the 'Brentwood' link and go to 'Login' on the top menu) https://www.inside-guides.
Whereas the 'Contact' page is fine (again via the 'Brentwood' site): https://www.inside-guides.
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;}
Web DevelopmentCSSHTML
Last Comment
UName10
ASKER
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>
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
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.
Please post a working link to the page.
ASKER
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
Many thanks
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:
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).