SHARE
TWEET

Untitled

a guest Jul 22nd, 2019 52 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="container">
  2.     <div class="box box-1">box 1</div>
  3.     <div class="box box-2">box 2</div>
  4.     <div class="box box-3">
  5.         <table>
  6.             <tr><td>1</td></tr>
  7.             <tr><td>2</td></tr>
  8.             <tr><td>3</td></tr>
  9.             <tr><td>4</td></tr>
  10.             <tr><td>5</td></tr>
  11.             <tr><td>6</td></tr>
  12.             <tr><td>7</td></tr>
  13.             <tr><td>8</td></tr>
  14.             <tr><td>9</td></tr>
  15.             <tr><td>10</td></tr>
  16.         </table>
  17.     </div>
  18. </div>
  19.      
  20. html,
  21. body {
  22.     height: 100%;
  23. }
  24.  
  25. .container {
  26.     height: 100%;
  27.     min-height: 100%;
  28.     display: flex;
  29.     flex-direction: column;
  30.  
  31.     .box {
  32.         text-align: center;
  33.         color: white;
  34.         font-family: sans-serif;
  35.         font-size: 36px;
  36.         padding: 20px;
  37.         display: flex;
  38.         flex-direction: column;
  39.         justify-content: center;
  40.     }
  41.  
  42.     .box-1 {
  43.         background-color: green;
  44.         height: 10vh;
  45.     }
  46.  
  47.     .box-2 {
  48.         background-color: blue;
  49.         height: 20vh;
  50.     }
  51.  
  52.     .box-3 {
  53.         background-color: red;
  54.         flex: 1;
  55.  
  56.     }
  57. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top