reactjs 当我在react中使用页脚组件时，页脚不会设置在页面的底部

a7qyws3x 于 2023-05-06 发布在 React

关注(0)|答案(3)|浏览(118)

我把它修好了！我在home组件中用了h-screen而不是min-h-screen
当我在react中使用footer组件时，footer不会设置在页面的底部。正好在中间

function App() {
  return (
    <>
        `<Navbar />
            <Routes>
                <Route path="/" element={ <Home /> } />
                <Route path="about" element={ <About /> } />
                <Route path="collection" element={ <Collection /> }/>
                <Route path="contact" element={ <Contact /> } />
                <Route path='*' element={ <Error /> } />
            </Routes>
        <Footer />
      </>
    )
}

页脚

import React from 'react'
const Footer = () => {
  return (
    <div>
      <h1>Footer</h1>
    </div>
  )
}

我几乎什么都试过了但是...

reactjs

来源：https://stackoverflow.com/questions/75841067/when-i-use-footer-component-in-react-footer-does-not-set-at-the-bottom-of-the

3条答案

按热度按时间

wpx232ag1#

你可以将你的组件 Package 在一个div中，并使用flex-box样式化div

<div className="flex flex-col justify-between"> //if you are using tailwindCSS if not give the div a className of your choice styles are down below
        <div>
          <Navbar />
            <Routes>
                <Route path="/" element={ <Home /> } />
                <Route path="about" element={ <About /> } />
                <Route path="collection" element={ <Collection /> }/>
                <Route path="contact" element={ <Contact /> } />
                <Route path='*' element={ <Error /> } />
            </Routes>
        </div>
        <Footer />
      </div>

联系我们

body{
    min-height: 100vh;
    height: 100%;
  }

.className{
     display: flex;
     flex-direction: col;
     justify-content: between;
  }

这将把页脚向下推到底部，即使屏幕上没有内容/路由可选地，您可以通过使用margin属性将页脚向下推得更多
如果你试图使页脚总是在底部ie使它固定到底部覆盖任何内容u可以使用下面的样式对页脚和省略代码我写在上面

.footer_class{
    display: fixed;
    bottom: 0;
    z-index: 100; //optionally edit this value and make it greater than any other element that might have a greater z-index than the footer that might intersect with it
  }

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

mrfwxfqh2#

没有更多的代码修复，但你可以只是寻找它被固定在底部的定位？

.footer-div {
  position: fixed;
  bottom: 0;
  height: 300px; /* height of your footer */
  width: 100%;
}

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

cunj1qz13#

我在马修·詹姆斯·泰勒的网站上找到了这个问题的很好的解决方案。对我来说，它工作：https://matthewjamestaylor.com/bottom-footer#problem

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

我来回答

reactjs 当我在react中使用页脚组件时，页脚不会设置在页面的底部

3条答案

相关问题

热门标签

最新问答