CODEWITHSUNDEEP
htmlcssheightdeviceviewport
Chirag Bhansali
Chirag Bhansali

Reputation: 2442

how to get the height of a user's device in html

How can I find the height of a user's device to optimize an element's height?

The following is my css

section.sr {
    margin:0;
    padding:0;
    background-image:  url(../images/simulation-1-waterfall.jpg);
    margin-top: 0;
    padding: 25px 35px 30px;
    height: 100%;
}

Upvotes: 2

Views: 5805

Answers (3)

Banzay
Banzay

Reputation: 9470

You can use a viewport height and width units: vh and vw, thus 100vh is equal 100% of viewport height.

The solution is:

section.sr {
    margin:0;
    padding:0;
    background-image:  url(../images/simulation-1-waterfall.jpg);
    margin-top: 0;
    padding: 25px 35px 30px;
    height: 100vh;
}

Upvotes: 7

Ty Sabs
Ty Sabs

Reputation: 229

Put this in the head of your html:

<meta name="viewport" content="height=device-height, initial-scale=1">

This will make height: 100%; be 100% of the device.

So if the device is 320px, height: 100%; will be 320px and height: 50%; would be 160px;

Keep in mind if you have a device with 320px with a <div> that is set to height: 50%; and then an <img> within that <div>, this nested image tag will only have a height of 160px if it is set to height: 100%;. Because it inherits from its parent.

Upvotes: 1

Shekhar Tyagi
Shekhar Tyagi

Reputation: 1674

section.sr {
    margin:0;
    padding:0;
    background-image:  url(../images/simulation-1-waterfall.jpg);
    margin-top: 0;
    padding: 25px 35px 30px;
    height: screen.heightpx;
}

Upvotes: 1

Related Questions