rokoucha/test.html

## test.html
<!DOCTYPE html>
<html>
  <head>
    <title>calc test</title>
    <style>
      body {
        margin: 0;
      }

      p {
        margin: 0;
      }

      .main {
        background-color: gray;
        border: 4px;
        border: solid 10px red;
        box-sizing: border-box;
        height: calc(100% - 64px);
        position: absolute;
        width: 100%;
      }

      .footer {
        backdrop-filter: blur(30px);
        background-color: lightgray;
        border: solid 10px blue;
        bottom: 0;
        box-sizing: border-box;
        height: 64px;
        left: 0;
        position: fixed;
        right: 0;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="main">
        <p>100% - 64px</p>
      </div>
    </div>
    <div class="footer">
      <p>footer</p>
      <a href="test.html" target="_blank"> Open in new tab </a>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>calc test</title>
	<style>
	body {
	margin: 0;
	}

	p {
	margin: 0;
	}

	.main {
	background-color: gray;
	border: 4px;
	border: solid 10px red;
	box-sizing: border-box;
	height: calc(100% - 64px);
	position: absolute;
	width: 100%;
	}

	.footer {
	backdrop-filter: blur(30px);
	background-color: lightgray;
	border: solid 10px blue;
	bottom: 0;
	box-sizing: border-box;
	height: 64px;
	left: 0;
	position: fixed;
	right: 0;
	}
	</style>
	</head>
	<body>
	<div>
	<div class="main">
	<p>100% - 64px</p>
	</div>
	</div>
	<div class="footer">
	<p>footer</p>
	<a href="test.html" target="_blank"> Open in new tab </a>
	</div>
	</body>
	</html>