CODEWITHSUNDEEP
htmlcssmargin
Alex
Alex

Reputation: 2959

How to set a margin-top of the size of the windows?

I want to put a div with CSS just after the current window (i.e when you start scrolling you see it).

It seems trivial and I tried 

#content {
    margin-top: 100%;
}

JSFiddle

But It isn't working and the margin don't take the height the current window.

Upvotes: 4

Views: 1060

Answers (1)

web-tiki
web-tiki

Reputation: 103790

Solutions :

  1. You can achieve your aim using position:absolute; and top:100%;
    FIDDLE
  2. second option is to add an element with height:100%; to "push" .content down
    FIDDLE

Explanation :

The issue is that percent margin-top (like margin-bottom or padding-top/bottom) is calculated according to parent's width. See here

Percentages refer to the width of the containing block

CSS :

body,html {
    background-color: lightblue;
    height:100%;
    width:100%;
    margin:0;
}

#content {
    position:absolute;
    top: 100%;
    background-color: lightgrey;
}

Code option 2 :

HTML :

<div id="push"></div>
<div id="content">
    <p>... content ...</p>
</div>

CSS :

body,html {
    background-color: lightblue;
    height:100%;
    width:100%;
    margin:0;
}
#push{
    height:100%;
}

#content {
    background-color: lightgrey;
}

Upvotes: 5

Related Questions