CODEWITHSUNDEEP
htmlcsswindowmargin
trunks470
trunks470

Reputation: 59

How to set top margin to one window length?

I want to make an element, i.e. a box I made in css, show up just out of frame or have a top margin value of one full window length.

Here's a website link for a working example: http://www.pulse8music.com/bestofchillstep2014 Referencing the linked website, I would like to replicate the white background area starting just out of frame, causing the user to discover the white area by scrolling. Thank you for your time.

HTML code:

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="Stylesheet.css"></link>
        <script language="javascript" type="text/javascript" src="jquery-1.11.2.min.js"></script>
        <script src="script.js"></script>
        <title>title</title>
    </head>
    <body>
        <div class = "titleBar">
            <p class = "title">title</p>
        </div>
        <div class = "targetBox">
            <p class = "longboxTitle">title</p>
            <p class = "longboxSubtitle">subtitle</p>
            <div class = "box"></div>
        </div>
    </body>
</html>

CSS Code:

.targetBox {
    height: 40cm;
    width: auto;
    background-color: #FFFFFF;
    z-index: 1;
    text-align: center;
    background-size: 100%;
    margin-right: -3000px;
    padding-right: 3000px;
    margin-left: -3000px;
    padding-left: 3000px;
    /* INSERT NEW CODE HERE */
}

Upvotes: 1

Views: 46

Answers (2)

Marcel
Marcel

Reputation: 683

Try to use css’ vh unit (viewport height) for this. 1vh equals 1 percent of the viewports (the browser windows) width, so setting the height to height: 100vh would pretty muhc do the job.

Upvotes: 1

DripDrop
DripDrop

Reputation: 1002

Although seemingly illogical, I found height:100% to work in this situation.

Good Luck on this beautiful site!

Upvotes: 1

Related Questions