search

tailwindlabs / discuss

A place to ask questions, get help, or share what you've built with Tailwind CSS.
MIT License
171 stars 9 forks source link

Fixed header (navbar), footer and main with full image #433

Closed MartijnHarmenzon closed 4 years ago

MartijnHarmenzon commented 4 years ago

I would like to create a page with a fixed hearder (containing my navbar) a footer and a main area showing a image covering the whole area of the main. Does anyone have an example how to achieve this? I am trying with the following code, but not yet getting there.

<body class="flex flex-col min-h-screen">
  <header>
    My navbar here...
  </header>
  <main class="flex-grow">
    <img class="object-cover w-full" src="./img/xxx.webp" alt="">
  </main>
  <footer>
    <div class="flex justify-center">
      Footer content here...
    </div>
  </footer>
</body>
MartijnHarmenzon commented 4 years ago

Managed to solve it like this:

<body class="flex flex-col h-screen">
  <header>
    My navbar here...
  </header>
  <main class="relative flex-grow">
    <img class="absolute object-cover object-top h-full w-full" src="./img/xxx.webp" alt="">
  </main>
  <footer>
    <div class="flex justify-center">
      Footer content here...
    </div>
  </footer>
</body>