CSS：尝试实现流畅的整页网格（无需滚动）答案

【问题标题】：CSS: Trying to achieve a fluid full page grid (no scrolling necessary)CSS：尝试实现流畅的整页网格（无需滚动）
【发布时间】：2016-09-23 22:41:45
【问题描述】：

我试图让下面页面上的网格包含 20 个项目，全宽 + 全高，并且是流动的。

到目前为止，我已经为页面配置了 20 个项目，全宽且流畅。不幸的是，网格内容被导航栏的高度（80px）向下推。我现在可以消除垂直滚动的唯一方法是将网格部分偏移导航栏的负高度，特别是：

.negative-navbar-offset {
     margin-top: -80px;
}

这种方法的明显问题是第一行中每个项目的顶部都隐藏在导航栏后面 - 并且在较小的设备上存在问题的用户界面。

有问题的页面可以在这里查看：http://159.203.231.192/about/

到目前为止，我已经尝试过：

非常感谢任何帮助/指导。谢谢。

【问题讨论】：

【解决方案1】：

只需检查此代码，看看它是否有助于桌面视图

header.masthead.masthead-inline {
    margin-bottom: 6em;
}

对于较小的屏幕，使用媒体查询

【讨论】：

【解决方案2】：

这个“.tg-grid-slider” div 采用内联样式（填充：0 2.5px）。如果我们设置 padding-top:80px。然后它会有所帮助。并通过JS设置高度。你已经完成了。

 .tg-grid-slider {
     padding-top:80px;
 }

【讨论】：