Update index.html

SablinSergey · Feb 5, 2024 · 1a9898f · 1a9898f
1 parent fae6e70
commit 1a9898f
Showing 1 changed file with 57 additions and 30 deletions.
diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
 
         body {
             display: flex;
-            justify-content: flex-start;
+            justify-content: center;
             align-items: center;
             flex-direction: column;
         }
@@ -25,12 +25,35 @@
             width: 60%;
         }
 
+        #relBlockID {
+            position: relative;
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+        }
+
         #ddID {
-            width:100%;
-            height: 100px;
-            overflow: auto;
+            width: 80%;
+            height: 25vh;
+            overflow: hidden;
             border: 1px solid black;
             box-sizing: border-box;
+
+            position: absolute;
+            top: 25px;
+        }
+
+        #ddInnerID {
+            height: 25vh;
+            width: 100%;
+            overflow-y: auto;
+        }
+
+        #ddInnerInnerID {
+            min-height: 7344px;
+            width: 100%;
         }
 
         #ddID.hidden {
@@ -42,32 +65,36 @@
 </head>
 <body>
     <input id="inputID" type="text"/>
-    <button id="buttonID" type="button">Button</button>
-    <div id="ddID" class="hidden">
-        <div id="ddInnerID">
-            <div>1</div>
-            <div>2</div>
-            <div>3</div>
-            <div>4</div>
-            <div>5</div>
-            <div>6</div>
-            <div>7</div>
-            <div>8</div>
-            <div>9</div>
-            <div>10</div>
-            <div>11</div>
-            <div>12</div>
-            <div>13</div>
-            <div>14</div>
-            <div>15</div>
-            <div>16</div>
-            <div>17</div>
-            <div>18</div>
-            <div>19</div>
-            <div>20</div>
-            <div>21</div>
-            <div>22</div>
-            <div>23</div>
+    <div id="relBlockID">
+        <button id="buttonID" type="button">Button</button>
+        <div id="ddID" class="hidden">
+            <div id="ddInnerID">
+                <div id="ddInnerInnerID">
+                    <div>1</div>
+                    <div>2</div>
+                    <div>3</div>
+                    <div>4</div>
+                    <div>5</div>
+                    <div>6</div>
+                    <div>7</div>
+                    <div>8</div>
+                    <div>9</div>
+                    <div>10</div>
+                    <div>11</div>
+                    <div>12</div>
+                    <div>13</div>
+                    <div>14</div>
+                    <div>15</div>
+                    <div>16</div>
+                    <div>17</div>
+                    <div>18</div>
+                    <div>19</div>
+                    <div>20</div>
+                    <div>21</div>
+                    <div>22</div>
+                    <div>23</div>
+                </div>
+            </div>
         </div>
     </div>
     <script>