2

几天前我发现了语义 UI，我必须说它令人印象深刻，我现在正试图将我的应用程序从 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;
}

难道我做错了什么？这在引导程序中有效。有人可以解释一下吗？

在此先感谢，普拉尼

4

3 回答 3

2

语义 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”以修复大屏幕上的最大宽度。

于 2014-02-20T23:44:00.240 回答
0

你的身体需要有一个定义的高度才能工作：

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。

于 2014-01-24T14:10:11.330 回答
0

在玩了很多之后，我发现语义用户界面不支持文档正文的样式。

因此，为了解决这个问题，我不得不将两个 div #div1 和 #div 放在 #container 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>

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

普拉尼

于 2014-01-24T21:11:22.620 回答