fix: properly stretch iframe to all available space (#282)

jenkinsci · Jun 16, 2024 · 5f1d6c0 · 5f1d6c0
1 parent 2d3121a
commit 5f1d6c0
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 41 deletions.
diff --git a/src/main/resources/htmlpublisher/HtmlPublisher/footer.html b/src/main/resources/htmlpublisher/HtmlPublisher/footer.html
@@ -1,7 +1,7 @@
 </ul>
-<div>
-<iframe id="myframe" height="100%" width="100%" frameborder="0"></iframe>
-</div>
+</nav>
+
+<iframe id="myframe"></iframe>
 
 </body>
 </html>
diff --git a/src/main/resources/htmlpublisher/HtmlPublisher/header.html b/src/main/resources/htmlpublisher/HtmlPublisher/header.html
@@ -1,7 +1,6 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!DOCTYPE html>
 
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<html lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html" />
 <!-- CSS Tabs is licensed under Creative Commons Attribution 3.0 - http://creativecommons.org/licenses/by/3.0/ -->
@@ -16,7 +15,7 @@
 
 ul#tabnav { /* general settings */
 text-align: left; /* set to left, right or center */
-margin: 8px 0 0 0; /* set margins as desired */
+margin: 0;
 font: bold 11px verdana, arial, sans-serif; /* set font as desired */
 border-bottom: 1px solid #6c6; /* set border COLOR as desired */
 list-style-type: none;
@@ -50,9 +49,23 @@
 
 /* end css tabs */
 
-/* FF 100% height iframe */
-html, body, div, iframe { margin:0; padding:0; }
-iframe { display:block; width:100%; border:none; }
+/* 100% height iframe */
+html, body {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+nav {
+    margin-top: 5px;
+}
+
+iframe {
+    flex: 1;
+    border: none;
+}
 
 h1
 {
@@ -85,45 +98,15 @@
 }
 function init(tabId){
 	updateBody(tabId);
-	updateViewport();
-
-	window.onresize = updateViewport;
 }
 
-function updateViewport(){
-	 var viewportheight;
-
-	 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
-
-	 if (typeof window.innerWidth != 'undefined')
-	 {
-	      viewportheight = window.innerHeight
-	 }
-
-	// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
-
-	 else if (typeof document.documentElement != 'undefined'
-	     && typeof document.documentElement.clientWidth !=
-	     'undefined' && document.documentElement.clientWidth != 0)
-	 {
-	       viewportheight = document.documentElement.clientHeight
-	 }
-	// older versions of IE
-	 else
-	 { 
-	       viewportheight = document.getElementsByTagName('body')[0].clientHeight
-	 }
-
-	iframe = document.getElementById("myframe");
-	iframe.style.height = (viewportheight-30)+'px';
-}
 var selectedTab = "tab1"
 </script>
 
 </head>
 
 <body onload="init('tab1');">
-
+<nav>
 <h1><a id="hudson_link" href="#"></a></h1>
 <h2><a id="zip_link" href="#">Zip</a></h2>