如何解决使语义ui网格行占用所有可用空间
我有一个使用语义ui网格的示例布局,如下所示。我要实现的是网格占据整个高度,然后让各行仅占用它们所需的空间(基于行高,填充等),然后将一行拉伸以占据“其余部分” ”。使用sematic ui可能吗?我不需要手动指定行的高度(即使是百分比)。
body,html {}
.grid {
height: 100vh;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</head>
<body>
<div class="ui grid">
<div class="row">
<div class="sixteen wide column">
<h1 class="header">My header</h1>
</div>
</div>
<div class="row">
<div class="thirteen wide column">
<p>
Main col
</p>
</div>
<div class="three wide column">
<p>
Side col
</p>
</div>
</div>
</div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。