語義UI - 如何設置百分比大小

Question

幾天前我發現了語義UI，我必須說它令人印象深刻，我現在試圖將我的應用從Bootstrap 3轉換爲語義UI。

這裏需要一點幫助，我想要做的是將頁面的主體分爲兩部分。我想有％div的高度，即％。 85％和15％，使其完全100％。但由於某種原因，它不起作用。

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

我做錯什麼了嗎？這在引導中起作用。 有人可以請說一說嗎？

由於提前， Praney

Answer 1

經過大量的遊戲後，我發現語義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

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

語義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> 

刪除單詞 '可堆疊的' 停止佈局響應。 在第一個列表中添加「頁面」一詞，以固定大屏幕上的寬度最大值。