質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2721閲覧

headerを固定し、コンテンツと重ならないようにしたい

sakura-shi

総合スコア93

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/05/27 15:45

編集2020/05/28 09:43

*やりたいこと
画面を大きく固定ヘッダとコンテンツの2つに分け、ヘッダはつねに固定したい
コンテンツは縦方向、横方向にスクロールしてもヘッダは固定されており、コンテンツは
縦方向にスクロールしてもヘッダの下をくぐらないようにしたい。(コンテンツのみスクロールするようにしたい。)

また可能なら、横方向にスクロールしてもヘッダ位置は変わらないようにしたい(画面左上に固定)

*やってみたこと 以下のとおり
ヘッダの固定はできたが、ヘッダ下部のコンテンツ部分を縦方向似スクロールすると、ヘッダをくぐってしまう(コンテンツのみスクロールできない)のが問題

html

1 <html> 2 <head></head> 3 <body> 4 <div id="header-fixed"> 5 <div id="header-bk"> 6 <div id="header">・・・</div> 7 </div> 8 </div> 9 <!-- コンテンツ --> 10 <div id="body-bk"> 11 <div id="body" style="height:1000px;padding-top:140px">contents start<br>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ・・・<br></div> 12 </div> 13 <!-- // コンテンツ --> 14 <div id="footer-fixed"> 15 <div id="footer-bk"> 16 <div id="footer">・・・</div> 17 </div> 18 </div> 19 </body> 20 </html> 21 <style> 22html, body{ 23 margin: 0; 24 padding: 0; 25 width:100%; 26 height:100%; 27} 28div#header-fixed 29{ 30 position: fixed; 31 top: 0px; 32 left: 0px; 33 width: 100%; 34 height: 140px; 35} 36 37 38div#header-bk { 39 background-color:#444; 40 padding:10px 0 20px; 41 height:110px; 42 width:100%; 43} 44 div#header { 45 border: 5px solid #fff; 46 height: 100%; 47 width: 960px; 48 margin: auto; 49 } 50 51 </style> 52

よろしくお願いします

キャプチャ添付 くぐっている状態
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/05/27 19:05

固定にしたら潜るのは当然かと思いますが(teratail然り)、具体的にどうしたいのでしょう。コンテンツ部分だけ別途スクロールにするとかですか?
sakura-shi

2020/05/28 00:22 編集

固定にしたら潜るのは当然かと思いますが(teratail然り)、具体的にどうしたいのでしょう。コンテンツ部分だけ別途スクロールにするとかですか? ーーーー> そうです。くぐらないようにしたいのです。       重ならないようにしたい。       コンテンツの高さは固定ではなく可変。       できないことなのでしょうか?
kei344

2020/05/28 00:35

「くぐらないように」がわかりません。具体的にくぐっていなくてスクロールできているサイトのURLや、くぐったときに何が問題になっているかを追記してください。
Lhankor_Mhy

2020/05/28 03:08

「コンテンツの高さは固定ではなく可変」とのことですが、コンテンツ高さを可変にしてコンテンツ部分だけ別途スクロールにする、というイメージがわきません。コンテンツ高さが可変であれば、コンテンツに合わせて高さが伸びるので、コンテンツ部分にスクロールは必要ないですよね?
mari.rinn

2020/05/28 06:56

sakura-shiさんの言う、くぐってる 重なっている という状態をスクショして貼って頂けるとわかりやすいかもです。
sakura-shi

2020/05/28 09:44

キャプチャを添付しました 下方にスクロールすると ヘッダにコンテンツが隠れてしまうのです。これを解決したいです。 コンテンツのみでスクロールできないのでしょうか? iframeは使用したくないです
mari.rinn

2020/05/28 10:19

>コンテンツのみでスクロールできないのでしょうか? コンテンツのみがスクロールしているからこそ貼って頂いた画像のようになる訳で、コンテンツの頭部分も出た状態にしたいなら、headerの固定を外すしかないのでは? ぎゃくに、なんの為にheaderをそこに固定させてるのか?って話になると思うんですけども。 コンテンツの頭を隠したくないのなら、headerに入れる要素は、上ではなく、右か左かに固定するとかはダメなんですか?
sakura-shi

2020/05/28 12:12

ありがとうございます。
guest

回答2

0

自己解決

多くのかたに返答いただきましたが、質問自体をみなおしたほうがよさそうなので解決とします。

投稿2020/05/28 12:14

sakura-shi

総合スコア93

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

こういうことですか?
「コンテンツの高さは可変」という条件は何かの行き違いでしょうから、とりあえず除外しました。
サンプル

css

1div#header-fixed 2{ 3 /* position: fixed; 削除*/ 4 top: 0px; 5 left: 0px; 6 width: max-content; 7 height: 140px; 8} 9 10 11#body-bk{ 12 height: calc( 100vh - 140px ); 13 overflow: scroll; 14}

投稿2020/05/28 03:10

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakura-shi

2020/05/28 12:13

ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問