備忘録です。
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;
}
コメントを残す