Q&A
ご回答ありがとうございます！
すみませんheaderは1500pxにしたく、またこちらのミスで申し訳ありませんが親要素のsecondも1500pxでした。この状態でposition: absoluteとするとやはりはみ出してしまうかと思います。
この様な場合だといかがでしょうか？？
こちらに対象のコードを書いています。
念の為同様のものを以下に記載します。
このような状態で、ヘッダーだけ固定してスクロールしたいです。それだけであればposition: absolute を headerに付与すれば良いですが、その状態で横スクロールも現状と同じようにヘッダーと一緒にできる様にしたいです。position: absoluteをつけてしまうとheaderは以下画像の様に横に伸びてしまいます。かといってposition:relative;を.secondに追加すると縦スクロールでヘッダーが固定されません。
この様な場合どうすれば良いでしょうか？思いつく方いれば是非ご教示いただきたいです。よろしくお願いいたします。
html
1<body> 2 <div class="first"> 3 <div class="second"> 4 <div id="header"> 5 ここにヘッダーが入ります。 6 </div> 7 <div class="body"> 8 縦にスクロールしたい 9 </div> 10 </div> 11 <div id="footer"> 12 ここにフッターが入ります。 13 </div> 14 </div> 15</body>
css
1.first { 2 background-color:#eee; 3 width: 1000px; 4 height: 500px; 5 margin: 0 auto; 6 overflow-x: scroll; 7} 8.second { 9 background-color:#50FFFF; 10 width: 1500px; 11 height: 500px; 12 margin: 0 auto; 13 overflow-x: scroll; 14} 15#header{ 16 width: 1500px; 17 background-color:#dfa3a3; 18 z-index:9999; 19 height:50px; 20} 21.body{ 22 overflow-x: scroll; 23 background-color: #BEC38A; 24 width: 1500px; 25 height: 200px; 26} 27#footer{ 28 width: 100%; 29 background-color:#5264bf; 30 z-index:9999; 31 height:50px; 32}
回答2件
0
ベストアンサー
こういうことでしょうか。
html
1<body> 2 <div class="first"> 3 <div id="header"> 4 ここにヘッダーが入ります。 5 </div> 6 <div class="second"> 7 <div class="body"> 8 縦にスクロールしたい 9 </div> 10 </div> 11 <div id="footer"> 12 ここにフッターが入ります。 13 </div> 14 </div> 15</body>
css
1#header{ 2 width: 1500px; 3 background-color:#dfa3a3; 4 z-index:9999; 5 height:50px; 6 position: sticky; /* 追加 */ 7 top: 0; /* 追加 */ 8}
投稿2022/06/02 02:25
総合スコア34347
0
「header」のスタイルとして「width: 1500px;」が指定されています。
「header」を親要素と同等の「width: 900px;」に指定すると、はみ出さないかと思います。
css
1#header{ 2 position:absolute; 3 width: 900px; 4 background-color:#dfa3a3; 5 z-index:9999; 6 height:50px; 7}
投稿2022/06/02 00:30
総合スコア1005
ヘッダに「position:absolute」を付与して固定する場合、ご掲示いただいているhtmlの構成の場合は、表示領域に幅を合わせて指定してください。
ご掲示いただいたコードの場合は、ヘッダの幅を「first」と同等の「1000px」に設定してみてください。
header幅を「1500px」に指定したい意図をご説明いただければ、違うご提案もできるかもしれません。
ご返信ありがとうございます。
少し分かりづらく申し訳ないですが、実際はbodyに対するヘッダーでbody,heder、その親のsecondは同じ幅にしたいです。その上でヘッダーだけ縦スクロール時に固定したいという状況です。例としてposition:absoluteを出していますが、position:absoluteにしたい訳ではなくヘッダーが固定されれば良いという感じです！度々申し訳ありませんがこの場合いかがでしょうか？
読解力が乏しく申し訳ありません。
その場合ですと、「hatena19」さんのご回答にある「sticky」を利用するのが適当かと思います。
「hatena19」さんのご回答をご確認いただけますでしょうか。
すみません、入れ違いで回答来ていたので確認させていただきましたがstickyで解決いたしました。
ご協力ありがとうございました！！
また、以下本件に追加で確認したい事を新規質問として起票させていただいたのですが、もし可能でしたらこちらもご一読いただけますと幸いです！
https://teratail.com/questions/0psi6s67jk4odi
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/06/02 03:08
2022/06/02 08:38