CSS:尝试实现流畅的整页网格(无需滚动)

时间:2016-05-26 05:20:17

标签: html css wordpress fluid-layout

我正试图让下面页面上的网格包含20个项目,全宽+全高和流畅。

到目前为止,我的页面配置了20个项目,全宽和流畅。不幸的是,网格内容被导航栏的高度(80px)压低了。我现在能够消除垂直滚动的唯一方法是将网格部分偏移导航栏的负高度,具体为:

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

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

可以在此处查看相关网页:http://159.203.231.192/about/

到目前为止,我已经尝试过了:

  1. html,body = 100%
  2. 100vh和100vw
  3. 的网格容器
  4. 带有calc的网格容器(100% - 80px);
  5. 非常感谢任何帮助/指导。谢谢。

2 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

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

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