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

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:

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

<div >
  <div >Title</div>
  <div >
    <div >Nav</div>
    <div >Content</div>
  </div>
  <div >Footer</div>
</div>

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

CodePudding user response：

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

CodePudding user response：

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 >
  <header></header>
  <main></main>
  <nav></nav>
  <footer></footer>
</div>