March 20, 2015

Responsive full page div using CSS

Responsive full page div using CSS

Specialty of this is each page will fill the entire window respectively. This will also be responsive. Done with pure CSS. The contents inside each page is centered. Try to resize the window and see the effect.

Here i have used three pages. You can use any number of pages as you wish accordingly. Don't forget to change the color of each pages in CSS to get the difference between each page.

HTML

<div class="wrapper tabled">
  <div class="stage" id="page1">
    <div class="middled">
      <h1><span class="thin">full</span><span class="thick">page</span></h1>
      <span class="thin">This is page one.<br />(scroll down for second page)</span>
      <p>try to resize the window</p>
    </div>
  </div>
</div>

<div class="wrapper tabled">
  <div class="stage" id="page2">
    <div class="middled">
      <h1><span class="thin">full</span><span class="thick">page</span></h1>
      <span class="thin">This is page two.<br />(scroll down for third page)</span>
    </div>
  </div>
</div>

<div class="wrapper tabled">
  <div class="stage" id="page3">
    <div class="middled">
      <h1><span class="thin">full</span><span class="thick">page</span></h1>
      <span class="thin">This is page three.<br />(this is the last page)</span>
    </div>
  </div>
</div>

CSS

html, body {
  height: 100%;
  margin: 0;
  font-family: Lato;
  color: white;
}

#page1 { background: #111111; }
#page2 { background: #5CA48D; }
#page3 { background: #cccccc; }

.wrapper {
  display: table;
  height: 100%; width: 100%;
}

.stage {
  display: table-cell;
  vertical-align: middle;
}

.tabled, .middled {
  text-align: center;
  margin: 0 auto;
}

h1 { text-transform: uppercase; }
h1 ~ span, p { color: #2d2d2d; }
.thin { font-weight: 300; }
.thick { font-weight: 900; }

p {
  position: absolute;
  bottom: 0;
  text-align: right;
  right: 1em;
  font-size: 80%;
}
demo

1 comment:

Popular Posts

Views