これはブログです。

3DCGとかWebとかカメラとか

この記事は更新されてから1年以上経過しています。

2017/05/21

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

備忘録です。CSSで組版してみたでは親の要素(a4-size, a5-size, b5-size)のheightは指定してあるのですが、例えば「画面いっぱい」となると<html>と<body>にheight: 100%を設定してあげないといけないのですね、“footer”を一番下に持ってくるで書いたのにすっかり忘れていました…。widthはこんなことしなくてもいいのに…。

 

<body id="wrapper">
    <header id="header">
        <h1>header</h1>
    </header>
    <nav id="navigation">
        <p>nav 1 | nav 2 | nav 3 | nav 4 | nav 5</p>
    </nav>
    <article id="article">
        <p>text text text text text</p>
    </article>
    <footer id="footer">
        <p>footer</p>
    </footer>
</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;
} 

カテゴリ: プログラミング / タグ:

まだコメントはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

%d人のブロガーが「いいね」をつけました。