Use height: 100% instead of fixed min-height

- Removed min-height: 500px, just use height: 100%
- Updated guide to clarify: never use vh units, always use %
- Simpler and more flexible approach

app.py

@@ -63,7 +63,6 @@ html, body {
   align-items: center;
   justify-content: center;
   height: 100%;
-  min-height: 500px;
   background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
   color: #fff;
   padding: 2rem;

guide-gradio-with-html-and-js.md

@@ -183,14 +183,14 @@ html, body {
 
 #app {
   height: 100%;
-  min-height: 500px;  /* Fixed minimum, not 100vh */
+  /* Use 100% not 100vh - viewport units cause iframe resizer loops */
 }
 
 /* Prevent iframe resizer issues */
 html, body, #root, .gradio-container, .contain, gradio-app {
   height: 100% !important;
   overflow: hidden !important;
-  min-height: 0 !important;  /* Important! */
+  min-height: 0 !important;  /* Important! Removes default min-height */
 }
 
 .contain, .main, gradio-app {
@@ -199,6 +199,8 @@ html, body, #root, .gradio-container, .contain, gradio-app {
 }
 ```
 
+**Key rule:** Never use `vh` units (`100vh`, `min-height: 100vh`). Always use `100%` which is relative to the parent, not the viewport.
+
 ## Complete Example: Math Calculator
 
 ```python
@@ -232,7 +234,6 @@ html, body { height: 100%; overflow: hidden; }
   align-items: center;
   justify-content: center;
   height: 100%;
-  min-height: 400px;
   background: #1a1a2e;
   color: white;
   gap: 1rem;