Fix 100vh to innerHeight

basis/innerheight.js

@@ -0,0 +1,7 @@
+(function () {
+	const declareInnerHeight = () =>
+		document.documentElement.style.setProperty("--inner-height", window.innerHeight + "px");
+	declareInnerHeight();
+	["resize", "load"].forEach(type =>
+		window.addEventListener(type, declareInnerHeight));
+})();

math/chobi/index.css

@@ -55,6 +55,10 @@
 	box-shadow: 0 0 0 0.2rem rgba(173, 181, 189, 0.5);
 }
 
+:root {
+	--inner-height: 100vh;
+}
+
 .reset-on-right-float {
 	margin: 19px 0;
 }
@@ -209,7 +213,7 @@ label {
 }
 
 #canvas-part {
-	height: calc(100vh - 80px - 148px);
+	height: calc(var(--inner-height) - 80px - 148px);
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -333,7 +337,7 @@ label {
 
 @media (min-width: 992px) {
 	#canvas-part {
-		height: calc(100vh - 80px);
+		height: calc(var(--inner-height) - 80px);
 	}
 
 	#title {
@@ -342,7 +346,7 @@ label {
 	}
 
 	#filters {
-		height: calc(100vh - 80px);
+		height: calc(var(--inner-height) - 80px);
 	}
 
 	.btn-group-04 {
@@ -374,7 +378,7 @@ label {
 html, body {
 	overflow: hidden;
 	width: 100vw;
-	height: 100vh;
+	height: var(--inner-height);
 	position: relative;
 }
 

math/chobi/index.html

@@ -13,6 +13,7 @@
 	<script src="../rgbaster.min.js"></script>
 	<script src="https://cdn.staticfile.org/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script>
 	<script src="https://cdn.staticfile.org/jquery-contextmenu/2.7.1/jquery.ui.position.js"></script>
+	<script src="/basis/innerheight.js"></script>
 	<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
 	<link rel="stylesheet" href="https://bootswatch.com/4/darkly/bootstrap.min.css">
 	<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css">

math/index.css

@@ -21,7 +21,7 @@ iframe {
 	padding: 0;
 	border: 0;
 	width: 100%;
-	height: calc(100vh - 60px);
+	height: calc(var(--inner-height) - 60px);
 }
 
 .nav-link {
@@ -41,14 +41,14 @@ iframe {
 	display: block;
 	padding-bottom: 12px;
 	overflow: auto;
-	height: calc(100vh - 72px);
+	height: calc(var(--inner-height) - 72px);
 	transition: all 250ms ease-in-out, height 0ms !important;
 }
 
 @media (pointer: coarse) {
 	.nav-pills,
 	#v-pills-tab {
-		height: calc(100vh - 120px);
+		height: calc(var(--inner-height) - 120px);
 	}
 }
 
@@ -134,7 +134,7 @@ button,
 	}
 
 	iframe {
-		height: 100vh;
+		height: var(--inner-height);
 	}
 }
 
@@ -152,3 +152,7 @@ button,
 :root.dark-font-color * {
 	color: white !important;
 }
+
+:root {
+	--inner-height: 100vh;
+}

math/index.html

@@ -7,6 +7,7 @@
 		<meta name="description" content="求解各种数学问题">
 		<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
 		<script src="https://cdn.staticfile.org/twitter-bootstrap/5.0.2/js/bootstrap.bundle.min.js"></script>
+		<script src="/basis/innerheight.js"></script>
 		<link rel="stylesheet" href="https://bootswatch.com/_vendor/bootstrap/dist/css/bootstrap.min.css">
 		<link id="css" data-theme="bootstrap" rel="stylesheet" href="https://bootswatch.com/_vendor/bootstrap/dist/css/bootstrap.min.css" crossorigin="anonymous">
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

math/turntable/index.html

@@ -7,9 +7,9 @@
 		<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
 		<!-- <script src="https://cdn.staticfile.org/popper.js/1.16.1/umd/popper.min.js"></script> -->
 		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
+		<script src="/basis/innerheight.js"></script>
 		<link rel="stylesheet" href="https://bootswatch.com/_vendor/bootstrap/dist/css/bootstrap.min.css">
-		<link id="css" data-theme="bootstrap" rel="stylesheet" href="https://bootswatch.com/_vendor/bootstrap/dist/css/bootstrap.min.css"
-		 crossorigin="anonymous">
+		<link id="css" data-theme="bootstrap" rel="stylesheet" href="https://bootswatch.com/_vendor/bootstrap/dist/css/bootstrap.min.css" crossorigin="anonymous">
 		<!-- <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> -->
 		<style>
 			@font-face {

option.html

@@ -94,14 +94,16 @@
 	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
 	<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
 	<script src="/basis/emmet.min.js"></script>
+	<script src="/basis/innerheight.js"></script>
 	<style>
 		@import url(/basis/css/ease.css);
 
 		:root {
+			--inner-height: 100vh;
 			--container-margin: 2rem;
 			--radius: 12px;
 			--container-width: calc(100vw - 2 * var(--container-margin));
-			--container-height: calc(100vh - 2 * var(--container-margin));
+			--container-height: calc(var(--inner-height) - 2 * var(--container-margin));
 			--waterfall-margin: calc(var(--container-margin) / 2);
 		}
 
@@ -136,7 +138,7 @@
 			background: var(--page-background);
 			overflow: hidden;
 			width: 100vw;
-			height: 100vh;
+			height: var(--inner-height);
 			position: relative;
 		}
 
@@ -651,7 +653,7 @@
 
 		.alert > .backdrop {
 			width: 100vw;
-			height: 100vh;
+			height: var(--inner-height);
 			position: fixed;
 			left: 0;
 			top: 0;
@@ -695,7 +697,7 @@
 
 		body>section.point-color {
 			width: 100vw;
-			height: 100vh;
+			height: var(--inner-height);
 			position: absolute;
 			overflow: hidden;
 		}
@@ -716,7 +718,7 @@
 			bottom: -27vh;
 			right: -50vw;
 			width: 100vw;
-			height: 100vh;
+			height: var(--inner-height);
 			background: radial-gradient(var(--section-color-1), transparent 70%);
 		}
 
@@ -848,7 +850,7 @@
 
 		section.animate-block {
 			position: absolute;
-			height: 100vh;
+			height: var(--inner-height);
 			width: 100vw;
 		}