kakari2 · December 8, 2015 17:39
diff --git a/html5_holygrail.html b/html5_holygrail.html
 <!DOCTYPE html>
 <html>
 <head lang="en">
    <meta charset="UTF-8">
    <title>sticky footer</title>
    <style>
        html{
            height: 100%;
        }
        body{
            margin: 0;
            padding: 0;
            min-height: 100%;
            height: 100%;
        }
        .container{
            min-height: 100vh;
            height: 100%; /* for IE11 */
            display: flex;
            background: gray;
            flex-direction: column;
        }
        .header{
            height: 5rem;
            background: #afaf8c;
        }
        .footer{
            height: 100px;
            background: #afaf8c;
        }
        .wrapper{
            flex: 1;
            display: flex;
            background: #c4beff;
        }
        .left{
            width: 300px;
            background: white;
        }
        .contents{
            flex: 1;
            background: #c4beff;
        }
        .right{
            width: 300px;
            background: white;
        }

    </style>
 </head>
 <body>
 <div class="container">
    <div class="header">
        <h1>吾輩のホームページ</h1>
    </div>
    <div class="wrapper">
        <div class="left">
            <ul>
                <li>自己紹介</li>
                <li>DOWNLOAD</li>
                <li>LINKS</li>
            </ul>

        </div>
        <div class="contents">
            <!-- 適当コンテンツ -->
            <h1>自己紹介</h1>

            <p>吾輩（わがはい）は猫である。名前はまだ無い。</p>

            <h1>生まれについて</h1>

            <p>どこで生れたかとんと見当（けんとう）がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮（に）て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始（みはじめ）であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶（やかん）だ。その後（ご）猫にもだいぶ逢（あ）ったがこんな片輪（かたわ）には一度も出会（でく）わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙（けむり）を吹く。どうも咽（む）せぽくて実に弱った。これが人間の飲む煙草（たばこ）というものである事はようやくこの頃知った。</p>　

        </div>
        <div class="right">

            <h2>関連記事</h2>
            <ul>
                <li>猫は終わった</li>
                <li>猫が好きな人に悪い人はいない</li>
                <li>猫で学ぶプロジェクトマネージメント</li>
            </ul>

        </div>

    </div>


    <div class="footer">
        &copy; OSANDON
    </div>

 </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>sticky footer</title>
	<style>
	html{
	height: 100%;
	}
	body{
	margin: 0;
	padding: 0;
	min-height: 100%;
	height: 100%;
	}
	.container{
	min-height: 100vh;
	height: 100%; /* for IE11 */
	display: flex;
	background: gray;
	flex-direction: column;
	}
	.header{
	height: 5rem;
	background: #afaf8c;
	}
	.footer{
	height: 100px;
	background: #afaf8c;
	}
	.wrapper{
	flex: 1;
	display: flex;
	background: #c4beff;
	}
	.left{
	width: 300px;
	background: white;
	}
	.contents{
	flex: 1;
	background: #c4beff;
	}
	.right{
	width: 300px;
	background: white;
	}

	</style>
	</head>
	<body>
	<div class="container">
	<div class="header">
	<h1>吾輩のホームページ</h1>
	</div>
	<div class="wrapper">
	<div class="left">
	<ul>
	<li>自己紹介</li>
	<li>DOWNLOAD</li>
	<li>LINKS</li>
	</ul>

	</div>
	<div class="contents">
	<!-- 適当コンテンツ -->
	<h1>自己紹介</h1>

	<p>吾輩（わがはい）は猫である。名前はまだ無い。</p>

	<h1>生まれについて</h1>

	<p>どこで生れたかとんと見当（けんとう）がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮（に）て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始（みはじめ）であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶（やかん）だ。その後（ご）猫にもだいぶ逢（あ）ったがこんな片輪（かたわ）には一度も出会（でく）わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙（けむり）を吹く。どうも咽（む）せぽくて実に弱った。これが人間の飲む煙草（たばこ）というものである事はようやくこの頃知った。</p>

	</div>
	<div class="right">

	<h2>関連記事</h2>
	<ul>
	<li>猫は終わった</li>
	<li>猫が好きな人に悪い人はいない</li>
	<li>猫で学ぶプロジェクトマネージメント</li>
	</ul>

	</div>

	</div>


	<div class="footer">
	© OSANDON
	</div>

	</div>
	</body>
	</html>
No results found