“footer”を一番下に持ってくる(Flexbox版)

2017/05/21

“footer”を一番下に持ってくる(Flexbox版)

備忘録です。

CSSで組版してみたでは親の要素（a4-size, a5-size, b5-size）のheightは指定してあるのですが、例えば「画面いっぱい」となると<html>と<body>にheight: 100%を設定してあげないといけないのですね。

“footer”を一番下に持ってくるで書いたのにすっかり忘れていました…。widthはこんなことしなくてもいいのに…。

&lt;body id="wrapper">
    &lt;header id="header">
        &lt;h1>header&lt;/h1>
    &lt;/header>
    &lt;nav id="navigation">
        &lt;p>nav 1 | nav 2 | nav 3 | nav 4 | nav 5&lt;/p>
    &lt;/nav>
    &lt;article id="article">
        &lt;p>text text text text text&lt;/p>
    &lt;/article>
    &lt;footer id="footer">
        &lt;p>footer&lt;/p>
    &lt;/footer>
&lt;/body>

html, body{
  height: 100%;
}
#wrapper{
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100%;
}
#header{
  width:
  height: 250px;
  border: 1px solid #000;
}
#navigation{
  height: 50px;
  border: 1px solid #000;
}
#article{
  flex:1;
  border: 1px solid #000;
}
#footer{
  height: 100px;
  border: 1px solid #000;
}

Category :

プログラミング