Question

这是我的页面外观：

我试图将<blockquote> <img src="https://socialbrew.dk/wp-content/uploads/2020/06/171026-better-coffee-boost-se-329p_67dfb6820f7d3898b5486975903c2e51.fit-760w-1.jpg"> <p>I love to drink Coffee</p> <p>Cofee is the nectar of life</p> </blockquote>添加到我的PageContainer中，但页脚仍在那里。我该如何解决？

这是我在App.js中的代码：

import fnmatch
import os

title = 'tEst.txt'                    # Try several combinations of upper and lower case
for file in os.listdir('.'):
    if fnmatch.fnmatch(file, title):  # They will be all found here
        print(file)

这是我的position: relative：

const PageContainer = styled.div`
  position: relative;
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <PageContainer>
        <TopNav />
        <SideNav />
        <RouterStyle>
          <Router>
            <ContactForm path="/contact" />
            <ShopAllProducts path="/" />
            <NewArrival path="/shop/new-arrival" />
            <Product path="/product/:title_url" />
          </Router>
        </RouterStyle>
      </PageContainer>
      <Footer />
    </>
  );
}

p / s：我正在使用样式组件

取出Footer.js后

这是我的项目Github：

Answer 1

将位置绝对值更改为固定值（绝对值是错误的，因为当您滚动页面时，绝对页脚也会滚动）

确保页脚位于根元素中，否则将父样式应用于页脚（如填充）在这种情况下，您应该清楚地提到CSS

left:0;
right:0;
bottom:0;

由于填充

您做对了，但实际问题是位置

.footer{
padding: 10px 0;
  font-weight: 500;
left:0;
right:0;
  bottom: 0;
  position: fixed;
  background-color: red;
  width: 100%;
  
  }

<div>
dffd
df
f
df
fd
fd
f
df

df
df
d
f
df
df
d
f
df
df
d
fd
f
df
d
fd
f
f
df
d
f
df
d
fd
ff
fd
f
df
df
fd
f
f
dfd
fd
f
d
fdf
d
f
f
df
df
d
f
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
df
fd
f
dfd
<br>
f
df
d
f
dfd
f
df
df
d
f
df
d
f
dffaffsdfsfdffdfdfdfdf
</div>

<div class="footer">
something
</div>

没有粘性页脚（主要元素占用高度：100vh，因此您的页脚在100vh之后会自动下降）

.main{
min-height:100vh;
width:100%;
}
.footer{

background:red;
height:20px;
}

<div class="main">
main


</div>


<div class="footer">footer</div>

我试图创建一个页脚停留底部，但它不起作用

1 个答案: