Semantic-UI - 크기를 백분율로 설정하는 방법

Question

나는 며칠 전 semantic-ui를 발견했으며, 나는 그 인상적인 말을해야하며, 이제 Bootstrap 3에서 의미 론적 UI로 응용 프로그램을 변환하려고합니다.

여기에서 약간의 도움이 필요합니다. 페이지의 본문을 2 부분으로 나누는 것입니다. 나는 % div에서 두 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가 문서 본문의 스타일을 지원하지 않는다는 것을 알아 냈습니다.

그래서 주위에 두 divs # div1 및 #div # container div 넣어야했습니다. 그때 스타일 적용 : 그래서 div의이 포함 된

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

:

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

를하고는했다. 다른 사람들이 같은 문제에 빠지면 그렇게 할 수 있습니다.

프라 니

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> 

는 레이아웃이 반응하는 것을 중지 단어 '스택'을 제거합니다. 큰 화면에서 너비 최대 값을 고정하려면 첫 번째 목록에 'page'라는 단어를 추가하십시오.