CODEWITHSUNDEEP
htmlcss
Maxime B
Maxime B

Reputation: 117

Div below a full height div

I'm making a single page website, so it is a long page. But I want to make a first div which is full height and full width of the page, and has a logo centered. Then I want to put divs below it with fixed heights.

So when the page is opened, the logo is always centered, and the div below is not yet visible (because the first takes full height). And when they start scrolling, the next div is right under it and shows up.

Is this even possible? I tried looking for this but found nothing.

Thanks Max

Upvotes: 1

Views: 104

Answers (1)

Bram Vanroy
Bram Vanroy

Reputation: 28427

Here you go: http://jsfiddle.net/BramVanroy/NMeAQ/

html, body {
  width: 100%;
  height: 100%;
}

#logo {
  width: 100%;
  height: 100%;
  background: #ccc;
}

#logo > img {
  border: 10px white solid;
  left: 50%;
  margin-left: -130px; /* the width of your image divided by 2 */
  top: 50%;
  margin-top: -130px; /* the height of your image divided by 2 */
  position: absolute;
}

Upvotes: 2

Related Questions