Html 页面容器填充等高页眉

我对shopify商店有一个简单的问题，我安装了一个固定的标题，并在pagecontainer中添加了一个50px的顶部填充，这样标题就不会与主要内容重叠，现在我在mobile上有了50px的间距，这空间太空了。如果您能帮我设置桌面和手机的两个顶部填充，我将不胜感激

粘性标题：

页面容器（主要内容）：

无论屏幕分辨率如何，如何将pagecontainer的顶部衬垫设置为等于页眉的确切高度？或者有一种方法可以为每种分辨率设置不同的填充（可能是媒体查询？）我3天前才开始学习这方面的内容，但我在谷歌上做了很多搜索，学习速度非常快。。我还找到了这个问题的解决方案，但我不知道如何实现它：将标头移动到它自己的固定包装器：

<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代码

您要做的是使用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) {

}

因此，对于您的应用程序，您要做的是将大型设备的#PageContainer定义为50px填充，对于小型设备，定义为20px填充，甚至在中型屏幕上定义为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块内的相同样式上定义填充，浏览器将结合当前屏幕大小的全局属性和@media-specific属性来设置内容样式。

您的CSS和HTML没有任何共同之处-您在CSS中列出的类在HTMLIt中没有使用。这是我在论坛中找到的解决方案，不是我的HTML代码。看起来您需要CSS媒体查询。对于手机和桌面，您的标题很可能具有固定的高度。使用媒体查询根据屏幕大小匹配此值。@fubar我的标题没有固定高度，但我可以在桌面上这样做，但在小屏幕上，我有完全不同的标题（导航栏+汉堡包菜单）@Mars14k-但移动标题有固定高度吗？你有到现场的链接吗？@stephen-r-smith非常感谢你的帮助，我非常感谢你抽出时间给我写信，不过我找到了另一个解决方案。我想我会使用百分比，因为它更容易。导航条高度为10%，页边距为10%。这种方式将是成比例的，并且永远不会重叠。这也是可行的，这取决于您希望对页面元素的控制程度。您还可以使用媒体断点来显示/隐藏不同的类，这样您就可以在大屏幕上有一个带有按钮和文本的导航栏，并在小屏幕上用汉堡包图标下拉菜单替换它。我将看一看引导，特别是用于创建响应性布局的网格布局系统，以及@media断点。从长远来看，我想你会真正体会到框架提供的灵活性和易用性。@stephen-r-smith现在我看到页眉作为桌面上的固定元素占用了太多的垂直空间，我只希望它是顶部导航栏，滚动时加上徽标标记，我知道我需要使用jQuery来更改外观，这是否太难实现？再次感谢！我会认真考虑使用媒体查询和固定大小的导航条，而不是%。在大型桌面显示器上，10%将是巨大的，而您真正想要的可能是在大型显示器上显示50px，在小型显示器上显示20px，或者类似的东西，这就是@media css挂钩为您提供精确控制的地方。如果你想在滚动时缩小导航条或将其固定在屏幕顶部，我会看一下这里的文档@stephen-r-smith我没有提到将导航条高度设置为10%没有效果，我只是将填充顶部设置为8%，并在多个浏览器和分辨率上测试了该网站。看起来不错！谢谢你的链接。

/* 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) {

}

#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;
    }
}