我正在尝试创建一个包含3个元素的布局。第一个和最后一个元素的高度是恒定的。我希望中间的元素有灵活的高度基于视口和滚动。
+--------------------+
| |
| 1 |
+--------------------+
| ||
| Adjusts with Window||
| Height ||
| ||
| 2 ||
| ||
+--------------------+
| 3 |
| |
+--------------------+
以下是我到目前为止所做的工作:https://jsfiddle.net/zpe9s4wv/11/
我的小提琴的问题是元素之间有空间。此外,元素不完全覆盖100%的视口高度,就像我想要的。
发布于 2018-07-30 07:40:49
尝试将以下内容添加到您的css中,因为uk-grid设置了边距:
.uk-grid {
margin: 0 !important;
}
如果不想删除所有网格的边距,请指定要更改的网格,例如:
.uk-grid.green {
margin: 0;
}
还要添加到你的类中:
.green {
...
height: 100vh;
}
发布于 2018-09-04 09:43:51
我们在这里的uk-grid- have将删除块之间的边距。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>
https://stackoverflow.com/questions/51585232
复制相似问题