CODEWITHSUNDEEP
csscss-position
learningtech
learningtech

Reputation: 33673

Make a DIV full screen and act like position relative

I want a div element to fill the full screen. So I have the following items:

<div style="background:black;position:absolute;top:0;left:0;right:0;bottom:0;"></div>
<div>Hello</div>
<div>World</div>

The problem I'm having is that the Hello World divs appear on top of the full screen div. I want the Hello World divs to appear after the full screen div, so that you have to scroll to it.

Essentially, I want the full screen div to act like it's relatively positioned. I don't want to use javascript to hard code the starting positions of the Hello World div.

Is there an easy way to achieve what I want with CSS only?

Thanks

Upvotes: 1

Views: 3297

Answers (3)

David Thomas
David Thomas

Reputation: 253308

In order for the first <div> to be full-screen you simply need to take advantage of the vh length units, rather than positioning absolutely:

/* Removing padding and margin from
   the specified elements: */
html,
body {
  margin: 0;
  padding: 0;
  border-width: 0;
}
/* a <div> is already 100% wide,
   so we specify only the height,
   and ensure that any lengths
   are calculated to include
   border-width, padding and margin
   using the box-sizing property: */
.fullpage {
  height: 100vh;
  box-sizing: border-box;
}
/* purely so that there is something
   to see easily, irrelevant to the
   demo: */
div:nth-child(odd) {
  background-color: #f90;
}
div {
  min-height: 2em;
  margin: 0;
  padding: 0;
}
<div class="fullpage"></div>
<div>Hello</div>
<div>World</div>

JS Fiddle demo.

References:

Upvotes: 4

Mike Trinh
Mike Trinh

Reputation: 1303

you can use 

height: 100vh;
width: 100vw;

no need for absolute top left right bottom;

Upvotes: 1

aisah
aisah

Reputation: 31

Check this:

<div style="background:black; height:100vh;"></div>
<div>Hello</div>
<div>World</div>

Upvotes: 2

Related Questions