React引导程序组件没有延伸到页面底部

Question

我希望当前显示的组件以及延伸到页面底部的链接
(实际上页脚应该在底部，但其他组件在它之前拉伸和结束。(

我还注意到，如果我在代码的底部添加一个p标记，就在App.js中最后一个div之前，它就会被放置在页面的底部。

我在想，这是否是因为我正在为App.js中的每个组件使用内联样式。我试图为该组件的代码中的每个组件设置样式，但例如，列表(nav(背景颜色最终并没有覆盖整个列表。

编辑：我发现，如果我将显示主要内容的行的样式height设置为92.6%，这将使其完全填满屏幕。

目前看起来像这个

App.js代码

class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="App">
<Router>
<Container>
{/* header */}
<Row style={{backgroundColor: "#343a40", color:"white"}}>
<Col >
<Header />
{/* <p>Header</p> */}
</Col>
</Row>
{/* Content */}
<Row style={{backgroundColor: "gray"}}>
{/* Nav */}
<Col style={{backgroundColor: "lightgray"}}>
<Navigation id="appNav"/>
</Col>
{/* Main */}
<Col xs={9}>
<Switch>
<Route path="/" exact component={Home} />
</Switch>
<Switch>
<Route path="/about" exact component={About} />
</Switch>
<Switch>
<Route path="/submit" exact component={Submit} />
</Switch>
<Switch>
<Route path="/toplist" exact component={Toplist} />
</Switch>
</Col>
</Row>
{/* Footer */}
<Row style={{backgroundColor: "lightgray"}}>
<Col >
<Footer/>
</Col>
</Row>
</Container>
</Router>
</div>
);
}
}

Answer 1

尝试在页脚中添加绝对位置：

<Row style={{backgroundColor: "lightgray",position: "absolute", bottom: "0px"}}>
<Col >
<Footer/>
</Col>
</Row>