Resize the toc in javascript to fit the remaing visible area

Author: merks

markdown/index.html

@@ -346,6 +346,8 @@ <h2>Table of Contents</h2>
 				if (document.location.hash.includes('#')) {
 					document.location.hash = document.location.hash;
 				}
+
+				updateTocSize();
 			}
 		}
 
@@ -474,6 +476,19 @@ <h2>Table of Contents</h2>
 			}
 		}
 
+		function updateTocSize() {
+			const toc = document.getElementById('toc');
+			const tocInner = document.getElementById('table-of-contents');
+			if (toc != null && tocInner != null) {
+				const height = window.document.documentElement.clientHeight;
+				tocInner.style.maxHeight = `${height - tocInner.getBoundingClientRect().top - 20}px`;
+				toc.style.maxHeight = `${height - toc.getBoundingClientRect().top - 20}px`;
+			}
+		}
+
+		window.onscroll = updateTocSize;
+		window.onresize = updateTocSize;
+
 		//]]>
 	</script>