◆html
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>FlckrPhotoSet</title> <link rel="stylesheet" href="css/Flickr_photoset.css"> <script src="js/oauth.js"></script> <script src="js/jquery.js"></script> <script src="js/Flickr_photoset.js"></script> <script> var photoset_id = '72157635974998255' var consumerKey = 'f4bc240df0b0418fb80e3719ec173dc0'; </script> </head> <body> <div id="header">Loading...</div> <div id="contents">Loading...</div> </body> </html>19行目："header"と20行目："contents"に分割して、"contents"の部分をスクロールできるようにする。
◆javascript
// #contentsの高さを全体の高さからheaderの高さと20pxとを引いた高さにする
var document_height = $(document).height();
var header_height = $(header).height();
document.getElementById('contents').style.height = (document_height - header_height-20) + "px";
全体(document)の高さから"height"の高さを引いたものを"contents"の高さに設定している。（ここでは、マージンをもってさらに20px引いた高さに設定している。）
"header"の高さが内容によって変わっても大丈夫。
◆css
html, body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#header {
background-color: white;
}
#contents {
overflow: auto;
background-color: #EFE;
}
5行目：全体のスクロールを禁止している。13行目："contents"部分はスクロールするようにしている。
