Set the height of a container to 100vh - x

To set the height of a container to 100vh - x (where x is the height of your navigation bar), you can use a combination of Tailwind CSS classes and custom utility classes. Unfortunately, Tailwind CSS doesn't directly support dynamic calc() values, but you can easily achieve this by using custom CSS or inline styles with Tailwind.

Here’s how you can do it:

Option 1: Using Inline style Attribute

You can calculate the height using the calc() CSS function directly within the style attribute. This method works well if you want a quick, one-off solution:

<nav class="h-[60px] bg-blue-500">
  <!-- Navigation content here -->
</nav>

<div class="bg-gray-200" style="height: calc(100vh - 60px);">
  <!-- Your container content here -->
</div>

In this example:

• The <nav> has a fixed height of 60px (h-[60px]).

• The container <div> uses the calc(100vh - 60px) to set the height to 100vh minus the height of the navigation.

Option 2: Using Tailwind with Custom CSS in style Tag

If you'd like to have a reusable solution or avoid inline styles, you can add a custom class in your CSS file:

1. Add custom CSS: In your styles.css (or wherever you have global styles), add a custom class like this:

    .full-height-minus-nav {
      height: calc(100vh - 60px); /* Adjust 60px to match the height of your navigation */
    }
   

2. Use this class in your HTML: Apply the class to your container in the HTML:

    <nav class="h-[60px] bg-blue-500">
      <!-- Navigation content here -->
    </nav>
   
    <div class="full-height-minus-nav bg-gray-200">
      <!-- Your container content here -->
    </div>
   

Option 3: Using Tailwind's Arbitrary Values (If you need dynamic height)

If you want to use Tailwind but don't want to manually set the height each time, you can also use Tailwind’s arbitrary values for calc() in height like so:

<nav class="h-[60px] bg-blue-500">
  <!-- Navigation content here -->
</nav>

<div class="bg-gray-200" style="height: calc(100vh - var(--nav-height));">
  <!-- Your container content here -->
</div>

In this case, you would dynamically set --nav-height using JavaScript or inline CSS if you want a dynamic adjustment based on the actual height of the nav element.

Option 4: Using Tailwind h-full and Flexbox

If you want to avoid using calc() and keep it purely Tailwind, you can use a layout with flexbox:

1. Use flex and flex-col for your container layout.

2. Set the nav to have a fixed height (h-[x]).

3. Let the container take the remaining space using flex-grow or flex-1.

Example:

<div class="flex flex-col h-screen">
  <nav class="h-[60px] bg-blue-500">
    <!-- Navigation content here -->
  </nav>

  <div class="flex-1 bg-gray-200">
    <!-- Your container content here -->
  </div>
</div>

In this example:

• flex and flex-col on the parent div create a column layout.

• The nav has a fixed height of 60px.

• The container (div with flex-1) will take up the remaining space (100vh - 60px).

Summary

• Inline styles: You can use calc(100vh - 60px) directly in the style attribute for simplicity.

• Custom CSS class: Create a custom class with calc(100vh - 60px) for reuse.

• Tailwind with flex layout: Use flex-1 to let the container take up the remaining height of the screen.

• Tailwind with arbitrary values: You can use style="height: calc(100vh - 60px)" if you prefer to handle calculations directly in your HTML.

These are all solid approaches depending on your specific use case and how much flexibility or customization you need.

Let me know if you need further assistance!