ページコンテナの詰め物の正確な高さのヘッダー

Question

私はshopifyストアで簡単な問題があります。固定ヘッダーをインストールして、50pxの上部パディングをpagecontainerに追加して、ヘッダーがメインコンテンツと重ならないようにします私は空きスペースがあまりにも大きいモバイルで50pxのスペースを持っています。デスクトップとモバイルの2つのトップパッドを設定する手助けができれば非常に感謝しています。

スティッキーヘッダ：

header.site-header { 
    position: fixed; 
    z-index: 99999; 
    background-color: #fff; 
    width: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    -webkit-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.36); 
    -moz-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.36); 
    box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.36); 
} 

ページコンテナ（主コンテンツ）：私は、正確な高さに等しくなるようにpagecontainerのトップpadingの設定方法

#PageContainer { 
    overflow: hidden; 
    padding-top: 50px; 
    height: 100%; 

画面の解像度に関係なくヘッダー？それとも、それぞれの解像度（おそらくメディアのクエリを使って）ごとに異なるパディングを設定する方法があります。私は3日前にこのようなことを覚えていますが、私はたくさんのGoogle検索を行い、非常に速く学ぶことができます。この問題を実装する方法はありません。ヘッダーを独自の固定ラッパーに移動する：

<div class="header.site-header"> 
    <div class="PageContainer is-moved-by-drawer"> 
     This is the fixed header content. 
    </div> 
</div> 

<div class="PageContainer is-moved-by-drawer"> 
    This is the page content. 
</div> 

ありがとうございました！

編集：これは私のHTMLコードではありません！

Answer 1

あなたがしたいことは、さまざまなデバイスサイズに異なるスタイルを定義できるようにするCSSメディアクエリを使用することです。デスクトップ/ラップトップ/タブレットサイズに#PageContainerスタイルを定義し、同じ#PageContainerスタイルは電話機ごとに異なります。

これらはデフォルトのブートストラップメディアクエリブレークポイントです：

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) { 

} 

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 

} 

/* Small Devices, Tablets */ 
@media only screen and (min-width : 768px) { 

} 

/* Medium Devices, Desktops */ 
@media only screen and (min-width : 992px) { 

} 

/* Large Devices, Wide Screens */ 
@media only screen and (min-width : 1200px) { 

} 

だからあなたのアプリケーションのために、何がやりたいことは、多分20ピクセルのパディングでは50pxのパディングなどの大型機器用、および小型デバイス向け#PageContainerを定義しています中規模のスクリーンでは40pxです。だからあなたのCSSでこのような何か

#PageContainer { 
    overflow: hidden; 
    height: 100%; 
} 

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) { 
    #PageContainer { 
     padding-top: 20px; 
    } 
} 

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 
    #PageContainer { 
     padding-top: 20px; 
    } 
} 

/* Small Devices, Tablets */ 
@media only screen and (min-width : 768px) { 
    #PageContainer { 
     padding-top: 30px; 
    } 
} 

/* Medium Devices, Desktops */ 
@media only screen and (min-width : 992px) { 
    #PageContainer { 
     padding-top: 50px; 
    } 
} 

/* Large Devices, Wide Screens */ 
@media only screen and (min-width : 1200px) { 
    #PageContainer { 
     padding-top: 50px; 
    } 
} 

あなたが本当に唯一の最小と最大@mediaブロックが必要ですが、あなたは別のブレークポイントが何であるかを確認し、実験することができますので、私はそれらのすべてを含めました。

最初に@mediaブロックの外にある画面サイズに関係なく同じスタイルになるような属性を定義して、自分自身を不必要に繰り返さないようにしてから、同じスタイルのパディングを@ブラウザは、コンテンツのスタイルを設定するために、グローバル属性を現在の画面サイズの@media固有の属性と組み合わせます。