# html.jsにクラスがつくことでページ全体に余白を出てしまう

**URL:** <https://community.shopify.com/t/html-js/266574>\
**Category:** 技術的なQ＆A\
**Tags:** javascript\
**Created:** [November 8, 2023, 2:24pm UTC](https://community.shopify.com/t/html-js/266574 "2023-11-08T14:24:19Z")\
**Posts on this page:** 5\
**Page:** 1

## AI-generated summary

ユーザーがShopifyのPrestigeテーマを使用しているサイトで、`html`要素に`js`クラスが付与されることで`padding-bottom: 60px`が適用され、ページ全体に不要な余白が発生する問題を報告。

**問題の詳細:**
- プレビューバーのhideをクリックしても余白が残る
- Shopifyストアにログインしていない状態でも同様の余白が発生

**提案された解決策:**
福水氏(ファイブビット)からの回答では、最新のPrestigeテーマでは同様の問題が確認できず、ストア構築時に追加されたカスタムコードやアプリが原因の可能性を指摘。

**対処方法:**
`theme.css`に以下を追加:
```css
html {
  padding-bottom: 0px !important;
}
```

**結果:**
ユーザーはこの方法で対処し、問題が解決したことを報告。ただし、今後の不具合防止には開発コードやアプリの見直しが推奨される。

<div class="post-metadata">

**Author:** ![mnfdann1](https://avatars.discourse-cdn.com/v4/letter/m/bbe5ce/32.png) [@mnfdann1](https://community.shopify.com/u/mnfdann1)\
**Post date:** [November 8, 2023, 2:24pm UTC](https://community.shopify.com/t/html-js/266574/1 "2023-11-08T14:24:19Z")

</div>

![mnfdann1_0-1699453090654.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/e/d/ed97c996d2ba49ddc4b878e210c15e1f173ea5b7.png)

画像のようにページを開くとクラス"js"がつきpadding-bottom:60pxが反映させてしまい、余白が出てしまいます。

previewバーのhide barをクリックするとpadding-bottom:60pxはなくなるのですが、本番環境にも余白が出でしまいます。

何か解決方法はないでしょうか？

---

<div class="post-metadata">

**Author:** ![Anonymous\_3b9a8e857ec4e2560bc009f074375383](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_3b9a8e857ec4e2560bc009f074375383/32/279353_2.png) [@Anonymous\_3b9a8e857ec4e2560bc009f074375383](https://community.shopify.com/u/Anonymous_3b9a8e857ec4e2560bc009f074375383)\
**Post date:** [November 9, 2023, 12:27am UTC](https://community.shopify.com/t/html-js/266574/2 "2023-11-09T00:27:33Z")

</div>

はじめまして。

株式会社ファイブビットの福水と申します。

上記ですが、Shopifyストアにログインしていない状態、例えば別の端末などでサイトを閲覧すると、padding-bottom:60px は反映されない仕様にはなっていないでしょうか？

もしそうでなければ、該当のストアのURLか、使用テーマをご教示いただければと思います。

---

<div class="post-metadata">

**Author:** ![mnfdann1](https://avatars.discourse-cdn.com/v4/letter/m/bbe5ce/32.png) [@mnfdann1](https://community.shopify.com/u/mnfdann1)\
**Post date:** [November 9, 2023, 6:34am UTC](https://community.shopify.com/t/html-js/266574/3 "2023-11-09T06:34:32Z")

</div>

ご返信ありがとうございます。

使用テーマはprestigeです。

Shopifyストアにログインしていない状態でもpadding-bottom:60pxがある状態です。

theme.cssのhtmlを

html {  
padding-bottom: 0px !important;  
}

Shopifyストアにログインしていない状態  
にすることで余白はなくなりましたがこの方法より良い方法はありますでしょうか？

---

<div class="post-metadata">

**Author:** ![Anonymous\_3b9a8e857ec4e2560bc009f074375383](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_3b9a8e857ec4e2560bc009f074375383/32/279353_2.png) [@Anonymous\_3b9a8e857ec4e2560bc009f074375383](https://community.shopify.com/u/Anonymous_3b9a8e857ec4e2560bc009f074375383)\
**Post date:** [November 9, 2023, 7:36am UTC](https://community.shopify.com/t/html-js/266574/4 "2023-11-09T07:36:14Z")

</div>

ご返信ありがとうございます。

私が持っている最新のprestigeテーマでは、同様の問題が発見できませんでした。

おそらくですが、ストア構築時の開発で追記されたコードかアプリが、不具合を起こしているかと思われます。

ただ、

html {  
padding-bottom: 0px !important;  
}

こちらの方法でも特に問題はないので、ちょっと月並みな表現ですが、直ったなら大丈夫、という感じです。

ただ、今使用されているprestigeテーマで、今後さらに不具合らしきものが起きたときは、入れているアプリか開発したコード(があれば)の見直しが必要かもしれません。

---

<div class="post-metadata">

**Author:** ![mnfdann1](https://avatars.discourse-cdn.com/v4/letter/m/bbe5ce/32.png) [@mnfdann1](https://community.shopify.com/u/mnfdann1)\
**Post date:** [November 10, 2023, 4:08am UTC](https://community.shopify.com/t/html-js/266574/5 "2023-11-10T04:08:54Z")

</div>

ご確認ありがとうございます。現在のところ問題はなさそうなのですのでこの方法で対処しました。

ご教示ありがとうございました。
