CODEWITHSUNDEEP
htmlcss
Thinker
Thinker

Reputation: 5366

Arrange two full sized divs below each other

I have two divs like following:

<div class="div-one">
 <p>Div 1</p>
</div>
<div class="div-two">
 <p>Div 2</p>
</div>

And in my css:

.div-one{
  position: fixed;
  width: 100%;
  min-height: 100%;
}
.div-two{
  position: relative;
  width: 100%;
  min-height: 100%;
}

I want to arrange these two divs bellow each other and each one of them occupies full screen (imagine a landing page). At a time only one div is visible on the screen and then user can scroll to see the other.

How can I achieve this?

Upvotes: 2

Views: 529

Answers (1)

keithjgrant
keithjgrant

Reputation: 12759

On way you can do this is with viewport relative units:

.div-one {
  min-height: 100vh;
}
.div-two {
  min-height: 100vh;
}

1vh is equal to 1% of the viewport height. 1vw is equal to 1% of the viewport width. (also vmin is the lesser of the two vmax for the greater.) These are supported in most but not all modern browsers. So you might want to provide a reasonable fallback value:

.div-one {
  min-height: 500px;
  min-height: 100vh;
}
.div-two {
  min-height: 500px;
  min-height: 100vh;
}

You don’t need the widths, as block-level elements are already width auto (which will basically be 100%), and you probably don’t want to use positioning if they are to flow normally in the page, one after the other.

Upvotes: 4

Related Questions