I've looked everywhere . and still couldn't come up with sample code of a very "basic" idea:
A div that is taking 90% of the screen size and it is adjusting itself whenever the browser size changes (to take 90% of the relative screen)
The nested divs inside it should resize themselves as well.
Is it even possible?
EDIT:
Width 90% is not working when I try to re size the screen vertically.
This question is related to
html
autoresize
Use vh attributes. It means viewport height and is a percentage. So height: 90vh would mean 90% of the viewport height. This works in most modern browsers.
Eg.
div {
height: 90vh;
}
You can forego the rest of your silly 100% stuff on the body.
If you have a header you can also do some fun things like take it into account by using the calc function in CSS.
Eg.
div {
height: calc(100vh - 50px);
}
This will give you 100% of the viewport height, minus 50px for your header.
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 20px;
resize: both;
overflow: auto;
}
img{
height: 100%;
width: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize both the height and the width of this 1234567891011 div
element.
</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
<img src="images/scenery.jpg" alt="Italian ">
</div>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
</body>
</html>
In this scenario, the outer <div> has a width and height of 90%. The inner div> has a width of 100% of its parent. Both scale when re-sizing the window.
HTML
<div>
<div>Hello there</div>
</div>
CSS
html, body {
width: 100%;
height: 100%;
}
body > div {
width: 90%;
height: 100%;
background: green;
}
body > div > div {
width: 100%;
background: red;
}
Demo
Code Snippet:
div{height: calc(100vh - 10vmax)}
Source: Stackoverflow.com