John John - 1 year ago 84
CSS Question

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>

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?


Answer Source

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: */
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>

JS Fiddle demo.


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download