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>

删除“可堆叠”一词以阻止布局响应。 在第一个列表中添加“页面”一词以修复大屏幕上的最大宽度。