Live
<body> <div class="siteWrap"> <header class="header">ヘッダー</header> <main class="main"> <p>コンテンツ</p> <p>flexを使うことで、footerを画面下部に配置できる。</p> </main> <footer class="footer">フッター</footer> </div></body>
Live
x
.siteWrap { display: flex; flex-direction: column; flex-wrap: wrap; min-height: 100vh;}.header { background-color: red; text-align: center; font-weight: bold; color: white; padding: 1em;}.main { background-color: green; text-align: center; font-weight: bold; color: white; padding: 1em; flex: 1;}.footer { background-color: blue; text-align: center; font-weight: bold; color: white; padding: 1em;}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.