Basic header-navbar-footer-content layout in Tailwind + CSS?

user_772170 0
Viewed 52

I'm looking to create a basic layout with Tailwind + CSS, with a fixed-height header, fixed-height footer, fixed-width nav bar, and content filling the rest, where the entire containing area expands to fill the available space, like this:

enter image description here

I've gotten this far in futzing with the Tailwind playground:

<div class="flex min-h-full w-full flex-col bg-slate-400 grow">
  <div class="flex h-32 w-screen bg-red-400">Title</div>
  <div class="flex h-auto w-screen flex-row grow">
    <div class="flex w-32 bg-yellow-300">Nav</div>
    <div class="flex w-full bg-blue-400">Content</div>
  </div>
  <div class="flex h-32 w-screen bg-green-400">Footer</div>
</div>

but the nav/content height doesn't expand to fill the available vertical space. If I swap h-auto in <div class="flex h-auto w-screen flex-row grow"> for h-screen, then it expands beyond the host div.

flexbox tailwind-css css html
2 Answers

Use the Word Break utility.

There's a comprehensive explanation about all the different kinds of word breaks in the link above, but when you apply flex to your elements, you lose the word break. Here's a code-pen demostrating it: CodePen

Also, you don't have to use as many flex classes as you used; you only need to apply them to the parent element.

I would also suggest creating a minimum width for your nav bar, for example, min-w-[8rem].

Here's a tailwind playground I created with all the things I wrote above: Link

Example with the w-screen min-h-screen: Link

user_177185870

This isn't Tailwind, so it won't be of direct use to you.

But, when adopting frameworks, it's always useful to have a vanilla comparison so we can see how things would be coded, if we weren't using the framework.

So, for the sake of having a reference to compare against, here's the same layout:

fixed-height header, fixed-height footer, fixed-width nav bar, and content filling the rest, where the entire containing area expands to fill the available space

but using:

  • HTML5 Sectioning Elements
  • CSS Grid

Working Example:

body {
  margin: 0;
}

.container {
  display: grid;
  grid: 80px auto 80px / 120px auto;
  min-height: 100vh;
}

header {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  background-color: rgb(255, 174, 201);
}

footer {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  background-color: rgb(181, 230, 29);
}

nav {
  grid-column: 1 / 2;
  grid-row: 2 / 4;
  background-color: rgb(255, 242, 0);
}

main {
  background-color: rgb(153, 217, 234);
}
<div class="container">
  <header></header>
  <main></main>
  <nav></nav>
  <footer></footer>
</div>

user_38977750
Related