适配剩余高度

Question

我正在尝试使用类似于此的 TailwindCss 创建布局：

+----------------------+
|                      |
+-----+----------------+
|     |                |
|     |                |
|     |                |
|     |                |
+-----+----------------+

这应该适合屏幕（宽度和高度）。当屏幕尺寸改变时，它应该适应而不显示滚动条。

到目前为止我想到了这个：

<!doctype html>                                                                                               
<html class="h-full">                                                                                         
<head>                                                                                                        
  <meta charset="UTF-8">                                                                                      
  <meta name="viewport" content="width=device-width, initial-scale=1.0">                                      
  <script src="https://cdn.tailwindcss.com"></script>                                                         
</head>                                                                                                       
<body class="h-full">                                                                                         
  <div class="h-full">                                                                                        
    <div class="flex flex-row h-40 bg-red-500">                                                               
    </div>                                                                                                    
    <div class="flex flex-grow">                                                                              
      <div class="flex bg-sky-600 w-48">                                                                      
      </div>                                                                                                  
      <div class="flex flex-grow bg-green-600">                                                               
          <canvas width=100 height=200 style="border: 10px solid black;"></canvas>                            
      </div>                                                                                                  
    </div>                                                                                                    
  </div>                                                                                                      
</body>                                                                                                       
</html>

前面的代码导致了这个

Answer 1

我将正文中第一个 div 的 class 从 h-full 更改为 h-full flex flex-col

<!doctype html>                                                                                               
<html class="h-full">                                                                                         
<head>                                                                                                        
  <meta charset="UTF-8">                                                                                      
  <meta name="viewport" content="width=device-width, initial-scale=1.0">                                      
  <script src="https://cdn.tailwindcss.com"></script>                                                         
</head>                                                                                                       
<body class="h-full">                                                                                         
  <div class="h-full flex flex-col">                     
    <div class="flex flex-row h-40 bg-red-500">       
    </div>                                                                       
    <div class="flex grow">                                                                              
      <div class="flex bg-sky-600 w-48">     
      </div>                                                                                                  
      <div class="flex flex-grow bg-green-600">                                                               
          <canvas width=100 height=200 style="border: 10px solid black;"></canvas>                            
      </div>                                                                                                  
    </div>     
  </div>                                                                                                      
</body>                                                                                                       
</html>

适配剩余高度

Fit remaining height

css

flexbox

tailwind-css