'div that is in fixed position at the bottom goes outside webpage

I am trying to create a button that is always at the bottom and is sticky (fixed).

<div class="bg-red-200 fixed bottom-0 w-full">

However, the issue is that the div is not 100% width, but goes completely outside webpage, how can I fix that?

https://play.tailwindcss.com/7hDCAKujYQ

enter image description here

htmlcssflexboxtailwind-css


Solution 1:[1]

You could use sticky and bottom-0 for the parent div of the button take a look here

<script src="https://cdn.tailwindcss.com"></script>

<div class="mx-auto flex h-max min-h-full w-full max-w-6xl">
  <div class="hidden sm:flex bg-red-400 w-1/3">left sidebar</div>
  <div class="flex relative flex-col w-96 space-y-4 ">
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content last</div>
    
    <div class="sticky bottom-0  w-full bg-red-200">
      <button class="my-4 flex w-full justify-center rounded-md border border-blue-400 bg-blue-400 p-2 font-semibold text-white">Go Button</button>
    </div>
  
    </div>
  <div class="hidden lg:flex w-1/3 bg-green-400">right sidebar</div>
</div>

Solution 2:[2]

It could be that your html structure is not adjusted for wanted behavior. If you get you div with button outside of flex div, you can achieve this:

  <div class="flex flex-col w-96 relative">
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
  </div>
  <div class="bg-red-200 fixed bottom-0 w-full">
    <button class="my-4 flex w-full justify-center rounded-md border border-blue-400 bg-blue-400 p-2 font-semibold text-white">Go button</button>
  </div>

You can check the result here: https://play.tailwindcss.com/71sRPrhRAE

Solution 3:[3]

You can add left-0 to the div and it will work. as shown in link below

<div class="bg-red-200 fixed left-0 bottom-0 w-full">

Edit:

In this case u will need to add position absolute to ur button's div.

because position: fixed will add it relative to the screen.

<div class="bg-red-200 absolute w-full bottom-0 left-0">

https://play.tailwindcss.com/71sRPrhRAE

Edit 2:

U should add w-96 class to ur button div. as it has been added to the parent div https://play.tailwindcss.com/7hDCAKujYQ

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dhaifallah
Solution 2 Lazar Nikolic
Solution 3

Related Questions