Geek asks and answers

CSS Position Ratio and Element Height

I have one element below the other, and I use the position relative to dragging the bottom element a little bit so that it overlays the top element.

The paperOverlay element is the last element on the page, vertically, and I want it to extend to the bottom of the browser window. However, the relative pushing of the position of the element leaves an equal number of spaces below. Is there any way to avoid this?

HTML looks like this:

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

And CSS looks like this:

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;
}

. , . margin-top: -70px, , , , , .

+3
4

, ? , , css, ?

+5

paperOverlay. , .

0

margin-top: -70px, , , , , .

:

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;
}

: relative; ​​ z- , .

display: block; , / ( divs , /, ), . , , .

0

"VH" . height: calc(100%-50px)

#main-nav{

    width: 55px;
    background-color: white;

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

More articles:


All Articles