时间戳

首页 > 解决方案 > 使用 UIKit/HTML5 垂直适合带有滚动的中间元素

html - 使用 UIKit/HTML5 垂直适合带有滚动的中间元素

问题描述

我正在尝试创建一个包含 3 个元素的布局。第一个和最后一个元素具有恒定的高度。我希望中间元素具有基于视口和滚动的灵活高度。

+--------------------+
|                    |
|         1          |
+--------------------+
|                    ||
| Adjusts with Window||
|     Height         ||
|                    ||
|         2          ||
|                    ||
+--------------------+
|         3          |
|                    |
+--------------------+

这是我到目前为止所做的： https ://jsfiddle.net/zpe9s4wv/11/

我的小提琴的问题是元素之间有空间。此外，元素并没有像我想要的那样完全覆盖视口高度的 100%。

标签： htmlcssuikit

解决方案

尝试将以下内容添加到您的 css 中，因为 uk-grid 有一个设定的边距：

.uk-grid {
  margin: 0 !important;
}

如果您不想删除所有网格的边距，请指定要更改的网格，例如：

.uk-grid.green {
  margin: 0;
}

还要添加到您的课程中：

.green {
...
height: 100vh;
}

推荐阅读