If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    CPW is offline
    Join Date
    Sep 2006
    Member #
    My real situation is a little too complicated to explain, but if needed I can provide the real thing as an example. However, for now I'm just going to give this simple example, using some of the real thing.

    Whether or not this is cheating, it works, and so this is my CSS for the body:

    body {	
    	position: absolute;
    	top: 15px;
    	bottom: 15px;	
    	width: 100%;
    	margin: 0;	
    	padding: 0;
    By adjusting the top and bottom properties, I am able to effectively make an element inside the body take 100% height minus whatever I set for the top and bottom, all without the browser allowing you to scroll down. I guess it's sort of a way to make the element inside have a height of (100% - top margin - bottom margin).

    Now, in the element inside the body - I'll just call it box - I have another element that acts as a shadow for the bottom of box. I just use a repeated background image on this element, which I will call shadow, and it looks like a shadow. In order to get the shadow outside of box, I give it absolute positioning and a negative bottom value equal to the height of the shadow, we'll say 15px.

    So now what I have is a box that starts 15px from the top of the page and ends 15px from the bottom. This box has a shadow that takes up the space between the bottom of the box and the bottom of the page. All is fine.

    The problem comes when I set the bottom value of body to 0, effectively setting my bottom "margin" for the box to 0. What I would like to see if the shadow simply get cut off and disappear. However, what is happening is that the negative bottom value of shadow is making the browser think there is 15px of content after the end of the body.

    So what I need is a way to make shadow show up without affecting the layout of anything else. I don't want it to be extending the body past the bottom of the box if I set the bottom value of body to something less than the height of the shadow. Any ideas? I don't know if this is even possible, and it's not even really critical or significant, but I've been trying to figure out how to do it just for the sake of figuring it out.

    I don't know if that made any sense to anybody, so if it's too confusing, I'll just give a real example and explain it based on that.

    By the way, I have already tried using overflow: hidden in a variety of places in my CSS, but it simply won't work because it also cuts off content that does matter if the content of the box takes up more than 100% of the browser height.



  3. #2
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Sydney, Australia
    Member #
    can you post a link to the real thing please? It's really hard to work all this out without a page.

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
All times are GMT -6. The time now is 08:58 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: