页面容器填充等于精确高度标题

Question

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

置顶标题：

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 {
    overflow: hidden;
    padding-top: 50px;
    height: 100%;

无论屏幕分辨率如何，如何将 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 代码！

Answer 1

您要做的是利用 CSS 媒体查询，这将允许您为不同的设备尺寸定义不同的样式，因此您可以为桌面/笔记本电脑/平板电脑尺寸定义 #PageContainer 样式，并且您可以定义手机的相同#PageContainer 样式不同。

这些是默认的 Bootstrap 媒体查询断点：

/* 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 定义为 50 像素的内边距，而对于小型设备，内边距可能为 20 像素，甚至在中型屏幕上可能为 40 像素。所以在你的 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 特定属性结合起来以设置内容样式。