Я хочу, чтобы компонент в настоящее время отображался, а также ссылки растягивались до нижней части страницы. (На самом деле нижний колонтитул должен быть внизу, но другой компонент растягивается и заканчивается непосредственно перед ним.)
Я также заметил, что если я добавлю тег ap внизу кода, прямо перед последним div в App . js он расположен внизу страницы.
Я подумал, может ли это быть из-за того, что я использую встроенные стили для каждого компонента в приложении. js. Я пытался стилизовать каждый компонент в коде для этого компонента, но, например, цвет фона списков (nav) в итоге не охватывал весь список.
Редактировать : я обнаружил, что если я установлю стиль height для строки, отображающей основное содержимое, на 92,6%, что заставит его полностью заполнить экран.
В настоящее время выглядит так
Приложение. 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>
);
}
}