スマホヘッダー部分の高さ調整

Question

お世話になっています。

過去の質問を参考に、フローティングヘッダーを作っています。
そこでヘッダー部分の高さの調整がしたいのですが、どのようにしたら良いでしょうか。

現在使っているCSSは、当店GOLD内"sp"フォルダの"spheadder.css"です。
まだ試作中のため、HTMLは載せていません。（商品ページ共通説明文に入れる予定です）

CSS要素に
body #ipnsh-header, body #rstTopSearch, body #topFuncShopPopup, body #shopName { visibility: hidden; }
を入れているのですが、ヘッダーと商品画像との間に隙間ができてしまいます。

作りたいヘッダーは、
http://item.rakuten.co.jp/spu/spu13329
のようなイメージです。

よろしくお願い致します。

Answer

ECマスターズの塚本です。

別途担当者よりお返事させていただきますので、
多少お時間いただきますが、今しばらくお待ちください。

Answer

ECマスターズの田中です。

body #ipnsh-header, body #rstTopSearch, body #topFuncShopPopup, body #shopName { visibility: hidden; }
で出来た画面上部の余白は、実際にそこあるはずの要素が見えなくなってできたものなので、
複数要素の高さが組み合わされており、調整しようとすると複雑なので、
一度完全に余白を消してから、余白を調整してください。

具体的な手順ですが、上記規則の
visibility: hidden;
を
display: none;
に変更し、
タグの内部に、必要な分だけ余白を作る形になります。

組み合わせると、下記のような記述になります。

body #ipnsh-header, body #rstTopSearch, body #topFuncShopPopup, body #shopName { display: none; }
article.current{ padding-top: 必要な高さpx; }

※必要な高さ は、フローティングヘッダーの高さを半角数字で記述してください。

Answer

田中様

ありがとうございます。
商品ページのほうはうまく設定できました。

同様にカテゴリページも設定したいのですが、
カテゴリページでは　article.current{ padding-top: 必要な高さpx; }　に設定した分の高さが反映されず、
フローティングヘッダーと本体上部が被ってしまいます。
どうしたら良いでしょうか。
よろしくお願い致します。

Answer

ECマスターズの田中です。

それでは、「article.current」を「body」にご変更の上、
表示をご確認いただけますでしょうか。

article.current{ padding-top: 必要な高さpx; }
↓
body{ padding-top: 必要な高さpx; }

Answer

田中様

お世話になっています。

bodyに変更することで希望通りの表示になりました。
ありがとうございました。