html - Semantic-UI - 如何以百分比设置大小

Question

几天前我发现了 semantic-ui，我必须说它令人印象深刻，我现在正在尝试将我的应用程序从 Bootstrap 3 转换为 semantic-ui。

这里需要一点帮助，我要做的是将页面主体分成两部分。我想要以 % 为单位的 2 个 div 的高度。 85% 和 15% 使其成为完整的 100%。但由于某种原因，它不起作用。

body {
height: 100%;
width: 100%;
}
#div1 {
height: 85% !important;
border: 1px solid #000000;
}
#div2 {
height: 15% !important;
}

我做错了什么吗？这在 Bootstrap 中有效。有人可以解释一下吗？

提前致谢，普拉尼

Answer 1

语义 IU 网格系统示例。

<div class="ui stackable grid">
<div class="equal height row">
    <div class="twelve wide column">

            <p>Your question was asking about vertical percentages, but here is an example of how the grid system of Semantic UI can have equal height rows so that a busy column like this one is the same height as others in the same row allowing for a div below  without overlaps. This area is three quarters wide (twelve blocks out of sixteen). It is whatever height the content is. </p> 

    </div>
    <div class="four wide column">

           <p>The small column</p>

    </div>
</div>

<div class="row">
    <div class="sixteen wide column">
        <div class="ui segment"> 
             <p> This is the footer in a box because it is wrapped in a div with a class name "ui segment". </p>
        </div>
    </div>
</div>

删除“可堆叠”一词以停止响应式布局。在第一个列表中添加单词“page”以固定大屏幕上的最大宽度。