HandsonTableのヘッダーを固定メニューの下に配置したい

初めて投稿します。JavaScript初心者です。
HandsonTableというライブラリを使用してサンプルアプリケーションを作成
しようとしています。
イメージとしては下記の様な感じです。

HandsonTableで表示するレコードをヘッダ含めて
コンテンツ領域に表示させたいと考えておりますが
レイアウト面の表示がうまくいかず問題を解決したいと
考えております。

色々と情報を探してみたのですが解決に繋がる情報がなく
困っております。どうかご回答をお願いいたします。

###発生している問題・エラーメッセージ
CSSで制御したいと考えて設定してみましたが
コンテンツ領域とヘッダ領域が被っている状態です。
※本来はヘッダ領域の下にコンテンツ領域を配置したい。

CSS

/* ヘッダ領域 */
header {
    float:top;
    width: 100%;
    height: 10%;
    overflow: hidden;
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 200;
}
/* コンテンツ領域 */
#main {
    margin-top: 120px;
    padding-top: 120px
    z-index: 100; 
    overflow: auto;
}

###試したこと
コンテンツ領域のz-indexの値をヘッダ領域より大きくすると
ヘッダ領域がコンテンツ領域の後ろに入ってしまいヘッダが
隠れてしまいます。
ヘッダ領域のz-indexの値をコンテンツ領域のものより大きく
するとヘッダ領域がコンテンツ領域の上に被る形になって
しまいます。
どうやらHandsonTableでz-indexの値に関わらず
ページの最上部に固定されているようです。

###補足情報(言語/FW/ツール等のバージョンなど)
JavaScript
handsontable 0.29.1

Lhankor_Mhy

2016/12/22 03:04

"padding-top: 120px"の後ろのセミコロンが抜けているので、それ以降のスタイルがすべて無効となりますが、実際のコードはきちんと書かれていますか？

Otazoman

2016/12/22 03:42

ありがとうございます。抜けていました。セミコロンを付けてもうまく表示できました。

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1body {
2	margin: 0;
3	padding: 10vh 0;
4}
5
6/* ヘッダ領域 */
7header {
8	/* 削除
9	float:top;
10	height: 10%;
11	*/
12	width: 100%;
13	height: 10vh;
14	overflow: hidden;
15	position: fixed;
16	top: 0px;
17	left: 0;
18	z-index: 200;
19}
20/* コンテンツ領域 */
21#main {
22	/* 削除
23	margin-top: 120px;
24	padding-top: 120px
25	z-index: 100; 
26	overflow: auto;
27	*/
28}
29```**動くサンプル：**[https://jsfiddle.net/sa3zqfde/](https://jsfiddle.net/sa3zqfde/)