Sometimes we need to expand height vertically or width horizontally depending on the height and width of the user's browser window.
We can do that by using Viewport-Percentage Lengths units like as vw and vh in CSS3.
=>Viewport-percentage lengths
The viewport units are a set of units for One-pagers, full-width grids, chat messenger design and many other things related to the size of the window/device viewport.
We can make use of vh: 1vh is equal to 1% of the viewport's height and vw: 1vw is equal to 1% of the viewport's width. That is to say, 100vh is equal to the height and 100vw is equal to the width of the browser window, regardless of where the element is situated. That means if you want to cover off the height of viewport, just simply use 100vh.
EX :
It stands for viewport-height. The viewport refers to the browser window size. Thus when using vh as a unit, the element’s height is adjusted relative to the browser window viewport’s height.
=>vw:
It stands for viewport-width. It is used to set the browser width relative to the browser window viewport’s width.
Here is the demo of Full Height Element
Demo 1 :
if you want to set it smaller size then use CSS calc function for it like a bellow example.
EX:
use the same logic in width as per the browsers window's width.
By using this you can set the height of a div to 100% or less than it as per our requirements.
Demo 2 :
You can also use it the same as for width.
This is most useful for chat messenger page, display banner as per browser's viewport height, display any images as per browser's viewport height etc.
We can do that by using Viewport-Percentage Lengths units like as vw and vh in CSS3.
=>Viewport-percentage lengths
The viewport units are a set of units for One-pagers, full-width grids, chat messenger design and many other things related to the size of the window/device viewport.
We can make use of vh: 1vh is equal to 1% of the viewport's height and vw: 1vw is equal to 1% of the viewport's width. That is to say, 100vh is equal to the height and 100vw is equal to the width of the browser window, regardless of where the element is situated. That means if you want to cover off the height of viewport, just simply use 100vh.
EX :
vw: 1/100th viewport width
vh: 1/100th viewport height
100vw === 100% of the width of the viewport.
100vh === 100% of the height of the viewport.
=>vh: vh: 1/100th viewport height
100vw === 100% of the width of the viewport.
100vh === 100% of the height of the viewport.
It stands for viewport-height. The viewport refers to the browser window size. Thus when using vh as a unit, the element’s height is adjusted relative to the browser window viewport’s height.
=>vw:
It stands for viewport-width. It is used to set the browser width relative to the browser window viewport’s width.
Here is the demo of Full Height Element
Demo 1 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo of set DIV Height to 100% of Viewport not full browsers Using CSS</title>
<style type="text/css">
body {
margin: 0;
/* This is used to reset any browser-default margins */
}
.container {
height: 100vh;
background: #0e11a1;
color: #fff;
}
</style>
</head>
<body>
<div class="container">Full Height Element of Viewport.</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo of set DIV Height to 100% of Viewport not full browsers Using CSS</title>
<style type="text/css">
body {
margin: 0;
/* This is used to reset any browser-default margins */
}
.container {
height: 100vh;
background: #0e11a1;
color: #fff;
}
</style>
</head>
<body>
<div class="container">Full Height Element of Viewport.</div>
</body>
</html>
if you want to set it smaller size then use CSS calc function for it like a bellow example.
EX:
.my-height {
height: calc(100vw - 30px)
}
.my-width {
width: calc(100vw - 30px)
}
In the above example "my-height" class element will display in as per given calculation means first remove 30px from browsers window's height then remaining will be the height of "my-height" class element.height: calc(100vw - 30px)
}
.my-width {
width: calc(100vw - 30px)
}
use the same logic in width as per the browsers window's width.
By using this you can set the height of a div to 100% or less than it as per our requirements.
Demo 2 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo of set DIV Height to 100% of Viewport not full browsers Using CSS</title>
<style type="text/css">
body {
margin: 0;
/* This is used to reset any browser-default margins */
}
.container {
height: calc(100vh - 40px);
background: #0e11a1;
color: #fff;
}
</style>
</head>
<body>
<div class="container">Full Height Element of Viewport.</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo of set DIV Height to 100% of Viewport not full browsers Using CSS</title>
<style type="text/css">
body {
margin: 0;
/* This is used to reset any browser-default margins */
}
.container {
height: calc(100vh - 40px);
background: #0e11a1;
color: #fff;
}
</style>
</head>
<body>
<div class="container">Full Height Element of Viewport.</div>
</body>
</html>
You can also use it the same as for width.
This is most useful for chat messenger page, display banner as per browser's viewport height, display any images as per browser's viewport height etc.
No comments:
Post a Comment