Question

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

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

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

我的小提琴出现的问题是元素之间存在空间。同样，这些元素也不能像我想要的那样完全覆盖视口高度的100％。

Answer 1

尝试将以下内容添加到您的CSS中，因为uk-grid的边距已设置：

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

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

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

还添加到您的课程中：

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

Answer 2

这里uk-grid-collapse将消除块之间的边距。 uk-child-width-1-1将为所有子块添加100％的宽度（更好的代码可见性）。我知道这是一个老问题，但可能是我的答案会帮助别人。

.red{
  background-color: red;
  height: 100px;
}
.green{
  background-color: green;
}

.blue{
  background-color: blue;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.10/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.10/css/uikit.min.css" rel="stylesheet"/>
<div class="uk-child-width-1-1 uk-grid-collapse" uk-grid >
  <div class="red">
    
  </div>
  <div class="green" uk-height-viewport="offset-top: true; offset-bottom: true">
    
  </div>
   <div class="blue">
    
  </div>
</div>

使用UIKit / HTML5使中间元素垂直适合滚动

2 个答案: