CODEWITHSUNDEEP
javascripthtmlcss
sephrrr
sephrrr

Reputation: 83

Make element height of browser window

I want to get my client's browser height and place it into my css.

Here is my main html:

<div class="picture" id="picture1">
    <div class="parallax"><img src="assets/img/header-wrap-bg.jpg"></div>
</div>

picture class structure :

.picture {
    height: /*(Here i wanna place browser height)*/;
}

and this is my event :

<body onresize="HeaderResize()">

how can i do this ?

Upvotes: 1

Views: 128

Answers (2)

Sakthivel
Sakthivel

Reputation: 626

To make your element to fit to your fullscreen, use below CSS properties,

.picture {
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin: auto;
}

Upvotes: 0

user3310334
user3310334

Reputation:

You can use the vh viewport-height units:

.picture {
    height: 100vh;
}

Here they all are:

  • vw: 1/100th viewport width
  • vh: 1/100th viewport height
  • vmin: 1/100th of the smallest side
  • vmax: 1/100th of the largest side

Note that this isn't technically the browser's height, rather it is the viewport's height:

The viewport is the user's visible area of a web page. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

enter image description here

Upvotes: 1

Related Questions