<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/index.css" type="text/css">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="mainContainer">
<div class="subContainer">
<div class="subSubContainer">
<div class="someText">
some text
</div>
</div>
</div>
</div>
</body>
</html>
and this CSS:
.mainContainer {
border: 1px solid rgb(0, 0, 0);
width: 400px;
height: 400px;
position: relative;
left: 100px;
top: 100px;
}
.subContainer {
border: 1px solid rgb(0, 0, 0);
width: 200px;
height: 200px;
position: absolute;
left: 100px;
top: 100px;
}
.subSubContainer {
border: 1px solid rgb(0, 0, 0);
width: 100px;
height: 100px;
position: absolute;
left: 50px;
top: 50px;
}
.someText {
left: 18px;
top: 38px;
position: absolute;
}
Live example:
some text
Now we will convert just width and height of subContainer in css to percentage, and formula looks like:
width: calc(100 * 200% / 400);
height: calc(100 * 200% / 400);
Where 200% is 200px from subContainer, 400 is 400px from mainContainer and we multiply it with 100 in order to convert calculation to percentage.
The whole css would look something like:
html, body
{
height: 100%;
}
.mainContainer {
border: 1px solid rgb(0, 0, 0);
width: calc(100*400%/1859);
height: calc(100*400%/1089);
position: relative;
left: 100px;
top: 100px;
}
.subContainer {
border: 1px solid rgb(0, 0, 0);
width: calc(100 * 200% / 400);
height: calc(100 * 200% / 400);
left: calc(100 * 100% / 400);
top: calc(100 * 100% / 400);
position: absolute;
}
.subSubContainer {
border: 1px solid rgb(0, 0, 0);
width: calc(100 * 100% / 200);
height: calc(100 * 100% / 200);
position: absolute;
left: calc(100 * 50% / 200);
top: calc(100 * 50% / 200);;
}
.someText {
left: 18px;
top: 38px;
position: absolute;
}
Notice that I added:html, body { height: 100%; } and formula to calculate height looks like:
height: calc(100*400%/1089);
Because height of my view port is 1089.