使用UIKit/HTML5通过滚动垂直调整中间元素
使用UIKit/HTML5通过滚动垂直调整中间元素
提问于 2018-07-30 07:00:01
我正在尝试创建一个包含3个元素的布局。第一个和最后一个元素的高度是恒定的。我希望中间的元素有灵活的高度基于视口和滚动。
+--------------------+
| |
| 1 |
+--------------------+
| ||
| Adjusts with Window||
| Height ||
| ||
| 2 ||
| ||
+--------------------+
| 3 |
| |
+--------------------+以下是我到目前为止所做的工作：https://jsfiddle.net/zpe9s4wv/11/
我的小提琴的问题是元素之间有空间。此外，元素不完全覆盖100%的视口高度，就像我想要的。
回答 2
Stack Overflow用户
发布于 2018-07-30 07:40:49
尝试将以下内容添加到您的css中，因为uk-grid设置了边距：
.uk-grid {
margin: 0 !important;
}如果不想删除所有网格的边距，请指定要更改的网格，例如：
.uk-grid.green {
margin: 0;
}还要添加到你的类中：
.green {
...
height: 100vh;
}Stack Overflow用户
发布于 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51585232
复制相关文章
相似问题