Adjust remaining vertical space

Trying to design a TailwindCss layout that resembles the following:

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

The goal is for it to adjust seamlessly to different screen sizes without showing scrollbars.

My current attempt looks like this:

<!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>                                                                                                       

This code produces the following output:

https://i.sstatic.net/foYxn.png

Answer №1

I made a change to the first div in the body by switching the class from h-full to 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to configure mui v5 to display class names without the css-xxx prefix?

Working with mui has truly been a delightful experience. Each developer seems to have their own unique approach when it comes to styling and layout in react. The flexibility provided by mui must present quite the challenge for library developers. In custo ...

concealing components during screen adjustments

There are 3 identical <div>s available: <div class="box">Hello World!</div> <div class="box">Hello World!</div> <div class="box">Hello World!</div> I need these <div>s to ...

Is there a way to implement fixed scrolling on a website?

I'm interested in implementing fixed scrolling on a webpage similar to the effect used here: . When you scroll on that website, it smoothly transitions to the next div. I believe there is some JavaScript involved, but I am not sure how to achieve thi ...

Strategies for successfully passing and showcasing the result of a calculation on a fresh view or component within Angular

I have developed a basic calculator application with two main components: Calculator and Result. The Angular router is used to navigate between these components. Now, I am looking for a way to dynamically display the calculation result from the Calculator ...

Various text sizes within a nested HTML list structure

I've developed a nested CSS class for an ordered list on my website, but I'm encountering a problem where each list item is appearing in different font sizes even though I have specified the font size. .number_list ol { font:normal 1.2em ...

How to incorporate an image as a background in a Bootstrap 4 card

I'm working on achieving a specific design, as shown in the image https://i.sstatic.net/GRjwo.jpg In Bootstrap 4, it's simply a group of cards with the "card-img-overlay" class. The issue arises when the height of the card is dependent on the im ...

Removing a CSS Class Using Tampermonkey: A Step-by-Step Guide

I'm completely new to CSS and javascript, so please bear with me. My goal is to remove the class disable-stream from each of the div elements located under the div with the class "stream-notifications". Below is an image for reference: Even though I ...

Leveraging webpack for CSS bundling

I'm currently working on bundling some NPM modules using webpack instead of utilizing a CDN. While I've successfully managed to integrate the .js files, I'm facing challenges with including the .css files for these modules. One example is ...

Using jQuery to apply a CSS class to a chosen radio button

How can I dynamically add a CSS class to a radio button based on its selection? $("input[type=radio][name=align]").on('change', function() { var radVal = $("input[type=radio][name=align]").val(); if (radVal == 'center') { $(" ...

The alignment of the table appears off on Internet Explorer, while it is perfectly centered on all other web

I'm encountering a strange issue with my table alignment on Internet Explorer. The table is offset to the right in IE, but perfectly centered in other browsers like Edge, Firefox, and mobile browsers. I am using Bootstrap for my design, but haven&apos ...

Unable to toggle navigation menu visibility on responsive design

I have provided the following code for responsive design. However, when I click the logo, it does not hide or show as expected. .toggle-nav { display: none; } .menu { float: right; } // Additional CSS code here <nav class="menu"> <ul c ...

Hide the menu when a user taps on an item on mobile or tablet devices

I'm facing a unique challenge and could use some guidance. The issue is with the mobile version of my website, accessible at . On tablets or mobile devices, the menu is condensed into a button. To navigate through the menu, I have to click the button ...

Tips for showing multiple autocomplete entries in a text box following a successful AJAX request

I'm having an issue with my code where the autocomplete multiple values, successfully retrieved by Ajax, are not being displayed. Here is the HTML I am using for display: <input type="text" name="s_to" id="s_to" class="controls"> Here is my jQ ...

Adjust the size of an HTML image for printing using a JavaScript window.print() function

On my website, I have a print option set up where specific elements are hidden using @media. How can I adjust the size of an image within the @media query when my JavaScript print function is triggered? I am able to modify a regular div element easily, but ...

What is the best way to prevent content from spilling over into the div on the right

I'm having trouble with a two column div where the text in the left column is overflowing into the right column. How can I prevent this? http://example.com <div id="wrapper-industry"> <div id="wrapper-form"> <div id="form_row"> ...

Customize your website with CSS and Bootstrap: create a transparent navbar-wrapper

Is there a way to make the menu bar background transparent without affecting the transparency of the text on the menu bar? This template is based on Twitter Bootstrap carousel. In this specific line, <div class="navbar navbar-inverse navbar-static-to ...

Is there a way to load and play different sounds on multiple audio players based on the length of an array?

I am attempting to load various sounds (.mp3 audio) on separate audio players that are displayed on a single HTML page. The number of players displayed on the screen is determined by the length of the array. In this specific example, I have 3 elements in t ...

Can file input buttons be custom styled?

Since I am using Material-UI, the traditional methods are not working for me. I have a form with two buttons positioned next to each other. One button is an "Upload File" input for users to upload a file, and the other is a submit button. I want both butto ...

Press the jQuery button to reset all input fields

I have created a table with input fields where class teachers can store their students' data for the principal to review. Each row in the table contains an update and reset button, allowing teachers to save or clear the information entered in the fiel ...

What could be preventing the application of my skew via -ms-filter matrix in Internet Explorer?

After working on developing a website using Chrome and Firefox, I've come to realize that it appears broken when viewed on Internet Explorer. Fixing the issue is turning out to be more challenging than I had initially anticipated. The primary problem ...