Question

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

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

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

我做错了吗？这适用于bootstrap。有人可以对此有所了解吗？

提前致谢， Praney

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>

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

Answer 2

你的身体需要有一个明确的高度才能发挥作用：

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

JSfiddle：http://jsfiddle.net/48Eh7/

但是我不确定你为什么要这样做，因为div元素将扩展为包含其中的任何内容。

如果您只想在页面底部使用页脚，那么您需要做的就是：

<div>
    <p>Content content blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
</div>
<div>
    <p>Footer stuff</p>
</div>

不需要CSS。

Answer 3

经过大量的游戏，我发现了语义 - ui不支持文档正文的样式。

因此，为了解决这个问题，我必须在#container div中放置两个div＃div1和#div。然后我应用了风格：

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

所以包含了div：

<div id="container">
  <div id="div1"></div>
  <div id="div2"></div>
</div>

它有效。只是想把它放在那里，所以如果其他人遇到同样的问题他们可以做到这一点。

Praney

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

3 个答案: