css 页脚增加了很多不必要的利润，以底部顺风

f2uvfpb9 于 2023-03-05 发布在其他

关注(0)|答案(2)|浏览(126)

开发人员，
我正在创建随机项目，以获得更多的知识与顺风CSS和React等。
我正面临着这个问题的页脚是添加这么多不必要的保证金到我的页面，这个问题可能是一个重复的，但...我看了所有的StackOverflow问题，并尝试了他们，但没有为我工作，他们中的大多数都不在tailwindcss。所以我请求您的帮助
页脚组件代码：

import React from 'react'
import "../index.css";

export default function Footer() {
  return (
    <div className='min-h-screen con'>
      <footer class="p-4 bg-[#061a29] shadow text-center md:flex md:items-center md:justify-center md:p-6 dark:bg-gray-800 flex-1">
      <div className='flex flex-col items-center'>

        <span class="text-sm    text-white sm:text-center dark:text-gray-400">© 2023 <a href="https://flowbite.com/" class="hover:underline">ManooGawra</a>. All Rights Reserved. 
        
        </span>
        
        <p className='flex items-center justify-center sm:justify-start  text-white bg-[#061a29]'>
        
  <span className=''>Made With</span>
  <svg xmlns="http://www.w3.org/2000/svg" fill="red" viewBox="0 0 24 24" strokeWidth={1.5} stroke="none" className="w-[15px] mx-[5px] ">
    <path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
  </svg>
  <a href="some-url" className='font-os underline'>by AndiiCodes</a>
</p>

      </div>


        
        
      </footer>
    </div>
  )
}

index.css

.con {
  width: 100% !important;
  position:absolute;
 
}
footer {
  
  position: absolute;
  bottom: 0 !important;
  right: 0;
  left: 0;
}

* {
  margin: 0;
  padding: 0;
}

我最近将代码添加到index.css中，因为我尝试了很多东西，但都无法找到它：（

一些屏幕截图，以便您了解我的意思

谢谢你的任何帮助。请忽略我混乱的代码，我正在工作：）

css

来源：https://stackoverflow.com/questions/75575698/footer-adding-alot-of-unwanted-margin-to-bottom-tailwind

2条答案

按热度按时间

gmxoilav1#

我不明白你为什么要用index.css
我只是对你的代码做了些小改动

<div className="bg-gray-800">
  <footer class="mt-64 md:w-[1240px] mx-auto flex flex-col justify-between py-6 sm:flex-row">
    <div className="flex flex-col items-center">
      <span class="text-sm    text-white sm:text-center dark:text-gray-400">
        © 2023{" "}
        <a href="https://flowbite.com/" class="hover:underline">
          ManooGawra
        </a>
        . All Rights Reserved.
      </span>

      <p className="flex items-center justify-center sm:justify-start  text-white bg-[#061a29]">
        <span className="">Made With</span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="red"
          viewBox="0 0 24 24"
          strokeWidth={1.5}
          stroke="none"
          className="w-[15px] mx-[5px] "
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
          />
        </svg>
        <a href="some-url" className="font-os underline">
          by AndiiCodes
        </a>
      </p>
    </div>
  </footer>
</div>

希望这对你有帮助

赞(0）回复(0）举报 2023-03-05

siotufzp2#

据我所知，你希望页脚在底部，
代码中的错误是您在footer中使用了flex-1。
尝试这种方法，

<div class="con flex min-h-screen flex-col">
  <div class="flex-1"></div> 👈 give flex-1 here so that it uses all the possible space
  <footer class="..."> 👈 footer uses only the required space at the bottom
  </footer>
</div>

- 注意：现在您不需要index.css文件**

完整代码

<div class="con flex min-h-screen flex-col">
  <div class="flex-1"></div>
  <footer class="bg-[#061a29] p-4 text-center shadow dark:bg-gray-800 md:flex md:items-center md:justify-center md:p-6">
    <div class="flex flex-col items-center">
      <span class="text-sm text-white dark:text-gray-400 sm:text-center">© 2023 <a href="https://flowbite.com/" class="hover:underline">ManooGawra</a>. All Rights Reserved. </span>

      <p class="flex items-center justify-center bg-[#061a29] text-white sm:justify-start">
        <span class="">Made With</span>
        <svg xmlns="http://www.w3.org/2000/svg" fill="red" viewBox="0 0 24 24" strokeWidth="{1.5}" stroke="none" class="mx-[5px] w-[15px]">
          <path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
        </svg>
        <a href="some-url" class="font-os underline">by AndiiCodes</a>
      </p>
    </div>
  </footer>
</div>

输出：

赞(0）回复(0）举报 2023-03-05

我来回答

css 页脚增加了很多不必要的利润，以底部顺风

2条答案

相关问题

热门标签

最新问答