Webページ作成覚書: javascript：画面を分割して下部だけスクロールさせる

◆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"部分はスクロールするようにしている。

ページ

2013-09-30

javascript：画面を分割して下部だけスクロールさせる

◆html

◆javascript

◆css