React <footer>を最下部に表示したい

Reactその他諸々初心者です。

オンラインショッピングサイトのような商品をリストしたページを作成しています。
footerをページ最下部に表示させたいのですが、
現状、CSSで下記設定をしても、ページの中間部（商品リストの１行目の下）に表示されます。

footer{
position: absolute;/←絶対位置/
bottom: 0; /下に固定/
}

確認すべき箇所、またはアドバイス頂けますと幸いです。

JSX
1const React = require('react')
2const DefaultLayout = require('./layouts/Default');
3
4class Index extends React.Component {
5  render(){
6    const products = this.props.products;
7
8    return (
9      <DefaultLayout title={"Shop Page"} styles={[{key: 0, href: '/css/app.css'}, { key: 1, href: '/css/indexpage.css'}]}>
10        <ul>
11          {
12            products.map((product)=>{
13              return(
14                <li key={product._id} id="column">
15                                  <img src={product.img} width="295px" height="393px" ></img><br />
16                                  <a href={`/products/${product._id}`}><font color="silver">{product.name}</font></a>
17                                  <br />
18                                  <font color="silver">In stock: {product.qty}</font>
19                                  <br />
20                                </li>
21              )
22            })
23          }
24        </ul>
25        <footer>
26        <p>© footer</p>
27        </footer>
28        </DefaultLayout>
29    )
30  }
31}
32
33module.exports = Index;
34