flexboxスティッキーフッターとカラムレイアウトのテストです。
(修正)ie11でbodyのmin-height:100vhが効かないバグに対応。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<style>
/* reset */
* {
margin: 0;
padding: 0;
font-size: inherit;
line-height: inherit;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
box-sizing: border-box;
}
/* sticky footer 通常版
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex-grow: 1;
}
header,
footer {
// ※header,footerの高さを直接指定せず子要素に指定する場合はこのセレクタのオミット可
flex-grow: 0; // 高さがstretchされないよう0を指定（デフォルト値のため省略可）
flex-shrink: 0; // 高さがshrinkされないよう0を指定
flex-basis: 40px; // 高さはheightでなくflex-basisで指定しないと高さを維持できない。ただし内包する子要素による高さは維持可能
// height: 40px; 親のdisplay:flexによってflexアイテム化しているため、main要素の高さが増えるとheight指定値を維持できない
// flex-basis:auto は仕様がまだ確定していないためブラウザによって挙動に差異があるので高さ・幅の固定に使用するのは避けたほうが良さそう
}
/* sticky footer ie11buxfix版 */
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100%;
}
main {
flex: 1 0 auto;
}
header,
footer {
flex: 0 0 40px;
}
/* skin & contents */
body {
background: #eee;
}
main {
display: flex;
flex-direction: column;
width: 96%;
max-width: 960px;
margin: 10px auto;
border: 1px solid #ddd;
background-color: #fff;
}
header,
footer {
width: 100%;
background-color: #f00;
color: #ccc;
}
.header-inner,
.footer-inner {
/* height: 40px;*/
background-color: #666;
color: #999;
}
.main-header {
background-color: #fdf;
}
.main-info {
background: #ffd;
}
.main-row {
display: flex;
flex-wrap: wrap;
flex-grow: 1;
background-color: #000;
}
.content {
width: 60%;
padding: 12px;
background-color: #dff;
}
.side {
width: 40%;
margin-left: auto;
background-color: #fdd;
}
.l-flex-row {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.item {
width: 45%;
flex-grow: 1;
background-color: #fff;
margin-left: 5px;
}
</style>
</head>
<body>
<header>
<div class="header-inner">header</div>
</header>
<main>
<div class="main-header">main-header</div>
<div class="main-info">info</div>
<div class="main-row">
<div class="content">
<p>content</p>
<div class="l-flex-row">
<div class="item">item L
<button type="button" id="button">コンテンツ表示</button>
<div id="toggleContents" hidden="">
<br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br><br>ほげ<br>ふが<br>ぴよ<br>
</div>
</div>
<div class="item">item R</div>
</div>
</div>
<div class="side">side</div>
</div>
</main>
<footer>
<div class="footer-inner">footer</div>
</footer>
<script>
!function() {
var elm = document.getElementById('button'),
target = document.getElementById('toggleContents'),
flag = !1;
elm.addEventListener('click', function() {
flag ? target.removeAttribute('hidden') : target.setAttribute('hidden', null) , flag = !flag
}, !1)
}();
</script>
</body>
</html>
以上、ありがとうございました。