上部に固定ヘッダー

Question

すべてのページの上部に固定ヘッダーを付けたいのですが、ヘッダーを変えた際（デザインなど）ページを一つ一つ作りなおすのは大変なので、ヘッダーのHTMLをすべてのページで呼び出したいんですが、どう記述すればいいですか？
index.htmlのファイルの上部にheader.htmlを持ってきて固定にしたいです。

<iframe id="header" src="ヘッダー/header.html" height="70" width="100%">

#header{
    position: fixed;
}

と書いたんですが、こうすると、ファイルが呼び出されはするんですが、index.htmlの文字が表示されなくなります。

またposition: fixedを使えばいいと教えてもらったんですが、どのように使えばいいいんでしょうか？

Answer 1

現状、htmlにhtmlをincludeするような方法はありません。
SSIを使うかjavascriptで読み込んで追加するか、そんな感じになると思いますが。

漠然としているので、もうちょっと詳しく書くか、ご自身でやってみた結果、分からないことを書込んでください。

Comments

[ryo-dev]

自分でやるにも、やり方がわからないので出来ない状況にあります。

[shi_ue]

残念ながら、一からhtmlを教えるような感じになるので、もう少しご自身で努力されてみてください。

[ryo-dev]

ちなみにこのページも上部に固定されてますよね？

[shi_ue]

そうですね。Chromeのデベロッパーツールなどでどんな風になっているか見てみてください。
cssでposition: fixedが付いています。

[ryo-dev]

position: fixedなるほど、SCCで場所指定してあるんですか。

Answer 2

<iframe id="header" src="ヘッダー/header.html" frameborder="no"></iframe>

#header{
	position: fixed;
	height: 70px;
	width: 100%;
}

Comments

[ryo-dev]

なんか上手いこと行きそうなんですが、`index.html`のファイルの上部（読み込んだヘッダー）と被ってる部分が見えないんですが、これはどのように対処すればいいですか？
解決しました。CSSでpadding-top: 70px;を記述すればよかったですね

[ryo-dev]

質問いいですか？
frameborder="no"
はどのような意味なのでしょうか？

[kei344]

ボーダーを消しています。
質問を追加せずに、新たに質問するようにしてください。上部に固定ヘッダーが出たなら、ひとまず「解決済」にしてください。

Answer 3

CSSのposition: fixed;が邪魔をしていたみたいでした。消してみたら上手いこと表示されました。
回答頂いた方ありがとうございました。