Установите оставшуюся высоту

Я пытаюсь создать макет с 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>                                                                                                       

Предыдущий код приводит к этому

enter image description here

Я верю, что это ваш ответ: stackoverflow.com/questions/68083319/…

Moebius 22.04.2022 22:54
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
2
1
36
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я изменил класс первого div внутри тела с 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>

Другие вопросы по теме