Question

我在React中为我的应用创建了一个包装器。我试图让页脚停留在页面的绝对底部，但是当子项渲染时，页脚停留在页面的原始底部，并且不会随页面调整大小。代码如下。（想象一下在儿童渲染之后现在中间有一个页脚的可滚动页面）。

import React, { Component } from 'react';
import Header from "./Header"; 
import Footer from "./Footer";

export default class Wrapper extends Component {
  render() {
    return (
        <div className="app-wrapper">
            <Header/>
                <div className="content">
                    {this.props.children}
                </div>
            <div>
              <Footer/>
          </div>
        </div>
    );
  }
}

我对CSS不太擅长。关于我可以尝试的任何想法？我已经尝试使用谷歌搜索解决方案无济于事。我已经尝试过基本解决方案，如position：relative;左：0;底部：0;右：0;位置：固定，位置：绝对等。

Answer 1

您应该将position: relative|fixed（取决于您的需要）提供给父容器。例如：

<div style={{ position: 'fixed', bottom: '0' }}>
  <Footer />
</div>

HTML dock to bottom

Answer 2

抱歉这些混乱的人。我在我的css文件中重新定义了样式，因此我的样式被覆盖了。 :(

在React中锚定页脚部分的任何方法？

2 个答案: