CSS position relative and element height

I have one element below another and I am using position relative to drag the bottom element up just a bit so that it overlays the top element.

The paperOverlay element is the last element on the page, vertically speaking, and I want it to extend to the bottom of the browser window. However, the relative nudging of the element's position leaves an equal amount of whitespace at the bottom. Is there any way to avoid this?

The HTML looks like:

div class="container">
    <div class="homePage">
        <!-- some content -->
    </div>
    <div class="paperOverlay" style="position: relative; top: -70px;">
        <!-- some more content -->
    </div>
</div>

And the CSS looks like:

div.container 
{ 
    width: 960px;
    margin: 0 auto;
}

div.homePage 
{ 
    width: 800px;
    height: 500px;
}

div.paperOverlay
{
    width: 960px;
    min-height: 400px;
    background: url('Images/Overlay.png') no-repeat top center;
}

Basically, the bottom layer is a white background with a torn paper edge effect at the top. The goal is to have the torn paper edge slightly overlay the bottom of the element above it. I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, 开发者_高级运维and I want the overlay to be on top.

Could you try a negative margin rather than relative positioning? Also, could you explain a little bit more why you need to do this and post you css so that we can better suggest a solution?

Try setting the height of the paperOverlay element. It should be the actual height minus the amount moved relatively.

I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.

Try this:

div.container 
{ 
    margin: 0 auto;
    width: 960px;
}

div.homePage 
{ 
    height: 500px;
    position: relative;
    width: 800px;
    z-index: 1;
}

div.paperOverlay
{
    background: url('Images/Overlay.png') no-repeat top center;        
    min-height: 400px;
    position: relative;
    top: -70px;
    /* you can optionally use bottom: 70px; rather than top: -70px */
    width: 960px;
    z-index: 2;
}

Using position: relative; on both elements and setting the z-index should get the overlay on top of the top element, rather than the other way around.

You may also want to try using display: block; on all elements where you need fixed width/height (especially divs and other containers that need a fixed width/height, like anchors or list items), to prevent collapsing. It will usually resize non-block-level elements to fit their contents and ignore width and height rules otherwise.

Using the "vh" unit worked for me. I could not get it to work with height: calc(100%-50px)

#main-nav{

    width: 55px;
    background-color: white;

    transition: 400ms;
    height: calc(100vh - 50px);
}