CODEWITHSUNDEEP
htmlcss
Павел Иванов
Павел Иванов

Reputation: 1913

How to make page sections full-size?

Good afternoon!

I have to stretch each section of the landing page to a full-page size. Is it possible in my case using CSS rules only?

The section looks like this:

enter image description here

The css rule for this section:

element.style {
    width: 100%;
    height: 100%;
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
}

Upvotes: 1

Views: 58

Answers (2)

Turnip
Turnip

Reputation: 36742

You can use 100vh which will set the height to the height of the viewport.

/* for demo only ... */

body {
  margin: 0;
}
div:nth-child(1) {
    background: red;
}
div:nth-child(2) {
    background: green;
}
div:nth-child(3) {
    background: blue;
}

/* Important bit... */

div {
    height: 100vh;
}
<div></div>
<div></div>
<div></div>

Upvotes: 1

Bertjuhh
Bertjuhh

Reputation: 115

Since its positioned absolute, you can use the following css to make it 100%.

element.style {
    z-index: 2;
    position: absolute;
    top: 0;
    right: 0;
    bottom:0;
    left:0;
}

See this Fiddle: https://jsfiddle.net/v6Lkkq4n/

Upvotes: 0

Related Questions