コンテンツ量が多い時も少ない時も、footerを常に最下部に持ってきたい。
そんな所で結構つまづいてしまったので自分用にメモ。
html・cssの記述は以下
test.html
<body>
<div id="wrapper">
<main>
<!--コンテンツの記述-->
</main>
<footer>
<!--フッターの記述-->
</footer>
</div>
</body>
test.css
body,
#wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
footer {
margin-top: auto;
}
jqueryを使うとか、他にもやり方は色々あると思いますが
このやり方だといじる所も少なく、コピペですぐ実装できるので初心者にもおすすめ。
'frameworks > react' 카테고리의 다른 글
| React Hooks Update Dictionary State: (...) operators의 활용 (0) | 2021.02.26 |
|---|---|
| 벨로퍼트와 함께하는 모던 리액트 강의(https://react.vlpt.us/) (0) | 2021.02.18 |
| React + ESLint + airbnb + vscode 세팅 (1) | 2020.09.13 |
| Exporting Data to Excel with React (0) | 2020.04.08 |
| 3 Reasons to useReducer() over useState() (0) | 2020.03.30 |