2016-06-16 33 views
0

私はSemantic-UIライブラリを使用していますが、少し問題があります。Semantic-UIのフルページグリッド

私は現在持っているHTMLとCSSで次のようにfiddleを作成しました。しかし、私が解決しようとしている問題は、結果の高さの制限のため、フィドルでは見えません。

下記の画像は私の問題を示しています。私が達成しようとしているのは、ヘッダーとフッターの間に全体のスペースを取るグリッドを作ることです。私はすでにheight: 100%を使用していますが、これはコンテンツ内のすべての要素間に広いスペースを作成します。 screenshot

ご協力いただければ幸いです。

答えて

-1

あなたが達成したい変更を加えるためにあなたのCSSを操作してください。あなたのコードでは、私は.ui.containerの高さを100%に設定し、.ui.segmentに変換します。以下のコードを参照してください。

body { 
 
    display: flex; 
 
    height: 100%; 
 
    flex-direction: column; 
 
} 
 
header { 
 
    padding: 0.25em; 
 
} 
 
footer { 
 
    padding-bottom: 1.5em !important; 
 
} 
 
main.content { 
 
    background-color: #f2f2f2; 
 
    flex: 1 0 auto; 
 
    width: 100%; 
 
} 
 

 
/* Header */ 
 
header.ui.secondary.menu { 
 
    border-bottom: 1px solid rgba(34, 36, 38, 0.15); 
 
    margin-bottom: 0em; 
 
} 
 
header.ui.secondary.menu .item, 
 
header.ui.secondary.menu .dropdown.item { 
 
    font-weight: bold; 
 
    margin: 0; 
 
} 
 
header.ui.secondary.menu .item:hover, 
 
header.ui.secondary.menu .dropdown.item:hover { 
 
    background: rgba(0, 0, 0, 0); 
 
    color: #21BA45; 
 
} 
 
header.ui.secondary.menu .active.item { 
 
    background: rgba(0, 0, 0, 0); 
 
    color: #21BA45; 
 
} 
 
header.ui.secondary.menu .item { 
 
    padding-right: 0; 
 
    padding-left: 1.42857142em; 
 
} 
 
header.ui.secondary.menu .item:first-child { 
 
    padding-left: 0; 
 
} 
 
header.ui.secondary.menu .item > i.icon, 
 
header.ui.secondary.menu .item > i.dropdown.icon { 
 
    margin: 0 0.25em; 
 
} 
 
header.ui.secondary.menu .disabled.item { 
 
    padding-right: 1.42857142em; 
 
} 
 

 
/* Footer */ 
 
footer.ui.segment { 
 
    padding: 0 1em 1em; 
 
} 
 
footer > .ui.divider { 
 
    margin: 0 0 1rem; 
 
    color: rgba(34, 36, 38, 0.15); 
 
} 
 

 
/* Full Grid */ 
 
.ui.full.grid { 
 
    background-color: #ffffff; 
 
    border-left: 1px solid rgba(34, 36, 38, 0.15); 
 
    border-right: 1px solid rgba(34, 36, 38, 0.15); 
 
} 
 
.ui.container{ 
 
    height:100%; 
 
    border-radius:0; 
 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css" rel="stylesheet"/> 
 
<!-- Header --> 
 
<header class="ui secondary menu"> 
 
    <div class="ui container"> 
 
    <a class="item" href="#">JSFiddle</a> 
 
    <div class="right menu"> 
 
     <a class="item" href="#"> 
 
     <div class="ui green button">Sign up</div> 
 
     </a> 
 
     <a class="item" href="#">Log in</a> 
 
    </div> 
 
    </div> 
 
</header> 
 

 
<!-- Page Content --> 
 
<main class="content"> 
 
    <div class="ui container segment"> 
 
    <div class="ui relaxed divided padded full grid"> 
 
     <div class="row"> 
 
     <div class="column"> 
 
      <h1 class="ui header"> 
 
      <div class="content"> 
 
       Contact 
 
      </div> 
 
      </h1> 
 
     </div> 
 
     </div> 
 
     <div class="ui divider"></div> 
 
     <div class="row"> 
 
     <div class="eleven wide column"> 
 
      <form class="ui form" novalidate> 
 
      <div class="field"> 
 
       <div class="two fields"> 
 
       <div class="field"> 
 
        <label>Name</label> 
 
        <input type="text" name="name" /> 
 
       </div> 
 
       <div class="field"> 
 
        <label>Email address <span class="disabled-text">(Required)</span></label> 
 
        <input type="text" name="email" /> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="field"> 
 
       <label>Subject</label> 
 
       <input type="text" name="subject" /> 
 
      </div> 
 
      <div class="field"> 
 
       <label>Message <span class="disabled-text">(Required)</span></label> 
 
       <textarea rows="5" name="text"></textarea> 
 
      </div> 
 
      <button type="submit" class="ui green button">Send request</button> 
 
      </form> 
 
     </div> 
 
     <div class="five wide column"> 
 
      <h5 class="ui dividing header"> 
 
      <i class="bug icon"></i> 
 
      <div class="content"> 
 
       Report a bug 
 
      </div> 
 
      </h5> 
 
      <div class="ui list"> 
 
      <div class="item"> 
 
       <i class="info icon"></i> 
 
       <div class="content"> 
 
       Provide as much information as possible. 
 
       </div> 
 
      </div> 
 
      <div class="item"> 
 
       <i class="info icon"></i> 
 
       <div class="content"> 
 
       Explain exactly what has happened and what steps should we take to reproduce the problem. 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <h5 class="ui dividing header"> 
 
      <i class="comments outline icon"></i> 
 
      <div class="content"> 
 
       Contacts 
 
      </div> 
 
      </h5> 
 
      <div class="ui relaxed list"> 
 
      <div class="item"> 
 
       <div class="content"> 
 
       <div class="header">John Doe</div> 
 
       <div class="description"> 
 
        [email protected] 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="item"> 
 
       <div class="content"> 
 
       <div class="header">Jane Doe</div> 
 
       <div class="description"> 
 
        [email protected] 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</main> 
 

 
<!-- Footer --> 
 
<footer class="footer ui vertical segment"> 
 
    <div class="ui divider"></div> 
 
    <div class="ui container"> 
 
    <div class="ui right floated horizontal list"> 
 
     <a class="item" href="#">Features</a> 
 
     <a class="item" href="#">Contact</a> 
 
    </div> 
 
    <div class="ui horizontal list"> 
 
     <div class="disabled item">Copyright &copy; 2016 JSFiddle.</div> 
 
    </div> 
 
    </div> 
 
</footer>

関連する問題