...

View Full Version : strange problem with "html, body" height 100% technique



carlrwyble
02-24-2011, 11:00 AM
Ok so this one is really frustrating, especially since I've used the html, body {min-height:100%;} code before, numerous times, and never had a problem. Now, for the life of me, I can't figure out where I've gone wrong on my latest project.

I have a 3 collumn layout with footer and header, pretty simple stuff. Now, I enclosed the collumns, footer and header in a container so I could apply a drop shadow. Still, simple. I then applied the drop shadow, and applied the html, body 100% technique. Since the drop shadow adds 15px on all sides, the bottom was, for all intensive purposes, margined. So I came up with the following code to "clip" the excess;

#clipping {
/*height:100%;*/
min-height:100%;
margin:0;
padding:0;
overflow-y:hidden;
}

where #clipping surrounds my drop-shadowed container. It's worked for me before, and removing it does not resolve my problem (which, dont worry, I'm getting to).


My problem is this; with the above code (with height commented out) my pages with content longer than the viewport behave perfectly. The bottom of the footer is flush with the bottom when scrolled down. However, on pages with content shorter than the viewport, the container just contracts to where it looks like I didnt even try to get it close to the bottom.

Now, when I remove my comment from the height declaration, my pages with shorter content become perfect, but the standard problem with height:100% and longer content shows up; I can't scroll.

So here's my code. I've posted what I think is relevant, hence ... in my css indicates purely style stuff, ie the navbar and text styling and so forth. let me know if i should post the whole stylesheet.

the site is in testing at www.valleyagins.com/newSite/index.html so you can see what im talking about. for instance, the Home page has longer content, and the Contact page has shorter content.



CSS


* {
margin: 0px;
padding: 0px;
}


html, body {
height:100%;
}

body {
list-style-type:none;
text-decoration:none;
background-color:#476C95;
background-attachment: fixed;
background-image: url(images/backgroundGradient.png);
background-repeat: repeat-x;
height:100%;
margin:0;
padding:0;
font-family: Verdana, Geneva, sans-serif;
}



#clipping {
/*height:100%;*/
min-height:100%;
margin:0;
padding:0;
overflow-y:hidden;
}

#body {
margin: 0px auto;
width: 800px;
background-color:#fff;
-moz-box-shadow: 0px 0px 30px #7e97b4;
-webkit-box-shadow: 0px 0px 30px #7e97b4;
box-shadow: 0px 0px 30px #7e97b4;
min-height:100%;
}

#banner {
width: 800px;
height:200px;
}

#navBar {
width:100%;
height:35px;
background-color:#ffebce;
}


......


......


#colLeft {
float:left;
width:150px;
}


#mainContent {
width:400px;
float:left;
padding:0px 50px 0px 50px;
min-height:100%;
}

#colRight {
float: left;
width:150px;
}

.clearfloats {
clear:both;
}

#footer {
width:100%;
height:75px;

}

.......



slimmed down HTML Structure

<body>


<div id="clipping">
<div id="body">

<div id="banner"> <a href.....><img..... /></a></div><!--banner-->

<div id="navBar">

......

.......



</div><!--navBar-->



<div id="colLeft">

...
....

</div> <!--colLeft-->
<div id="mainContent"><!-- InstanceBeginEditable name="EditRegion3" -->
<div id="fill">


......
.......
.....


</div>
<!-- InstanceEndEditable --></div>
<!--mainContent-->

<div id="colRight">
</div><!--colRight-->


<div class="clearfloats"><!-- --></div>
<div id="footer">


</div><!--footer-->

</div><!--body-->

</div><!--clipping-->


</body>
<!-- InstanceEnd --></html>

abduraooft
02-24-2011, 11:45 AM
Why do you need that extra <div id="clipping"> there? Isn't that inner <div id="body"> with min-height: 100%; enough in your case?

carlrwyble
02-25-2011, 08:58 AM
the #clipping div is there to clip the box shadow that is on the #body div. when I applied the drop shadow with a radius of 15px, it acted as a 15px margin in instances where the 100% height was working correctly. so the #clipping div clips the shadow from the top and bottom.

i have not found an easier way of applying a box shadow to only two sides of an element using only css. if you have a better method i would love to try it.

also, i tried removing the box shadow and the clipping div. didnt affect my problem.

abduraooft
02-25-2011, 09:22 AM
so the #clipping div clips the shadow from the top and bottom.

also, i tried removing the box shadow and the clipping div. didnt affect my problem.

I don't understand that. Could you please make a version without that "clipping div" and describe the issue?

carlrwyble
02-25-2011, 11:00 AM
Ok. I made a second upload of the site without the clipping div. I uploaded it to a sub folder so you can see the difference it makes.

Site A: Whole Site with Clipping Div (http://www.valleyagins.com/newSite/index.html)

Site B: Whole Site without Clipping Div (http://www.valleyagins.com/newSite/no_clipping/index.html)

They can be differentiated by whether or not they include the "no_clipping" subdirectory in the url. Site B is in this directory, and DOES NOT have my "clipping div."



Ok. Here are instructions to see my problem.


1) On Site A, you should be at the Home page by defualt. Scroll down to the bottom. You will see that the #body div (my main container) is flush with the bottom.

2) Still on Site A, navigate to the Contact Us page. Notice that since the content is shorter than the viewport, the div is not flush with the bottom. This is the main problem I am trying to solve; the difference between the pages with longer and shorter content.

3) For those who believe the clipping div may be the problem, it has been removed on Site B. Follow the steps 1+2 on Site B, and notice that on neither page does the #body div make contact with the bottom. This is due to the box-shadow; it acts as a margin, pushing the div away by 15px. This is what the "clipping div" fixes.


Because removing the clipping div does not affect the shorter pages, I am inclined to believe that it is not the source of my problem.

Also, instead of posting my code here, because it is so long, it would probably be easier for you to view the source code from the site itself and navigate to the style sheet that way. If I'm making an incorrect assumption, please let me know.


Thanks,
Carl

carlrwyble
02-25-2011, 11:02 AM
Why do you need that extra <div id="clipping"> there? Isn't that inner <div id="body"> with min-height: 100%; enough in your case?


And no, it doesnt seem to be enough (although youre right, it should be) which is what is really confusing me.

You can see the exact same code in action (without the clipping div) at the second link in my reply above.

carlrwyble
02-25-2011, 11:07 AM
One more thing; in my attempts to not be one of those people who simply posts their code, says what they want and ask you to do it for them without any real description of the problem, I might end up being quite verbose. I'm sorry if I type too much but I just want to make my problem as easy to understand as possible.

carlrwyble
02-25-2011, 11:14 AM
I just noticed something even more annoying: the pages that are longer seem to shift left a couple pixels for no reason. You can see the jump by using the left navigation to switch between Personal/Crop/Farm and Ag (the longer pages) and Business/Life+Health/Bonds/Specialty (the shorter pages).


All of these pages use exactly the same code. The only difference is the content inside the editable region.

This just keeps getting weirder...

abduraooft
02-25-2011, 12:32 PM
I'd make a single full height div (with min-height for FF and height for IE6) and apply an 840px wide (and 1px height) background image (with shadows at either ends) and set repeat-y to it.

Excavator
02-25-2011, 03:49 PM
Hello carlrwyble,
Have you solved your issue #2 then? When I remove content from http://www.valleyagins.com/newSite/no_clipping/index.html I am left with a full height white page with a shadow.




I just noticed something even more annoying: the pages that are longer seem to shift left a couple pixels for no reason.
The longer pages shift over the width of the scrollbar that is not present on the shorter pages. The usual solution is to force the scrollbar to be present even on pages that don't require it.
Add overflow-y: scroll; to the CSS for body to force the scrollbar.
Demo here (http://nopeople.com/CSS%20tips/vertical_scrollbar/index.html).

Excavator
02-25-2011, 03:54 PM
Also, instead of posting my code here, because it is so long, it would probably be easier for you to view the source code from the site itself and navigate to the style sheet that way. If I'm making an incorrect assumption, please let me know.

You're right, we can easily get your code and CSS from the links you provide. In fact it's easier because then we can see your images and we don't have to re-assemble the code you post to reproduce your issue locally.

Posting code works to, when posting code in the forum though, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.

carlrwyble
02-25-2011, 10:46 PM
k, so i removed both the drop shadow and the clipping, and for some reason its working now. im befuddled because it appears the box-shadow was causing the problem on my browser.... anyways, it seems that the only sane solution is to remove both and just use the damned background image technique.

thanks to everyone who chipped in. and thanks excavator for the scroll tip. i had to use both the overflow and the 100.1% things, was i supposed to only need one or the other? cause i tried them separately and it seems they only work together.

if there are any people reading who have such powers, in CSS3.1 or whatever, please make box-shadow able to remove blur from specific sides.

Excavator
02-25-2011, 11:19 PM
i had to use both the overflow and the 100.1% things, was i supposed to only need one or the other? cause i tried them separately and it seems they only work together.


Just the one, overflow-y: scroll;, should work.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum