HTML
<!-- コメント--> <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="pikesaku"> <meta name="keywords" content="python study"> <meta name="description" content="pike web"> <meta name="robots" content="all"> <meta http-equiv="content-language" content="ja"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <title>pike web site</title> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <div id="top">top</div> <div id="side">side</div> <div id="main">main</div> </body> </html>
CSS
/*コメント*/ html { height: 100%; margin: 0; } body { margin: 0; height: 100%; overflow: auto; } #top { height: 50px; background-Color:blue; overflow: auto; } #side { float:left; width: 200px; background-Color:red; overflow: auto; height: 100%; } #main { overflow: auto; height: 100%; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
ポイント
コメントはHTMLとCSSで書き方が違う
sideとmainにheight: autoを指定するとデータがある部分しか範囲にならない。
box-sizing指定することで、widhtがより制御しやすくなる。(boarder・margin・padding含まれる)
http://ja.learnlayout.com/box-sizing.html
bodyにmargin: 0つけないと周りに白い縁ができてしまう。