網格內部到網格列的高度問題

Question

我有一個2列的網格。在第一列中，我有第一列中的第一列，第二列中列出了兩列。顯然，第二列會更大。我需要第一列的分段佔據全高。有任何想法嗎？

謝謝！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//oss.maxcdn.com/semantic-ui/2.1.8/semantic.min.js"></script> 
 
<link href="//oss.maxcdn.com/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" /> 
 

 
<div class="ui padded grid"> 
 
    <div class="eight wide column"> 
 
    <div class="ui raised segment"> 
 
     <h3>Header 1</h3> 
 
     <i>Select all that apply</i> 
 
     <br /> 
 
     <br /> 
 
     <div class="field"> 
 
     <div class="ui checkbox"> 
 
      <input type="checkbox" id="id1" name="id1" value="1" tabindex="0" /> 
 
      <label>Information about widgets</label> 
 
     </div> 
 
     </div> 
 
     <div class="field"> 
 
     <div class="ui checkbox"> 
 
      <input type="checkbox" id="id2" name="id2" value="1" tabindex="0" /> 
 
      <label>Additional information about widgets</label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="extraColumn" class="eight wide column"> 
 
    <div class="ui raised segment"> 
 
     <h3>Question 1</h3> 
 
     <div class="field"> 
 
     <div class="ui checkbox"> 
 
      <input type="checkbox" id="content_1" name="content_1" value="1" tabindex="0" /> 
 
      <label>Include Sprockets</label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="ui raised segment"> 
 
     <h3>QUestion 2</h3> 
 
     <div class="field"> 
 
     <div class="ui checkbox"> 
 
      <input type="checkbox" id="content_2" name="content_2" value="1" tabindex="0" /> 
 
      <label>Don't include sprockets</label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

語義UI使用CSS Flexbox，和grid的方式被聲明，使得相鄰列匹配的高度。因此，您需要做的就是確保您的左側segment的高度爲100％，以填充您的column的整個高度。

結果：

<div class="ui raised segment" style="height:100%;"> 

段：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//oss.maxcdn.com/semantic-ui/2.1.8/semantic.min.js"></script> 
 
<link href="//oss.maxcdn.com/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" /> 
 

 
<div class="ui padded grid"> 
 
    <div class="eight wide column"> 
 
    <div class="ui raised segment" style="height:100%;"> 
 
     <h3>Header 1</h3> 
 
     <i>Select all that apply</i> 
 
     <br /> 
 
     <br /> 
 
     <div class="field"> 
 
     <div class="ui checkbox"> 
 
      <input type="checkbox" id="id1" name="id1" value="1" tabindex="0" /> 
 
      <label>Information about widgets</label> 
 
     </div> 
 
     </div> 
 
     <div class="field"> 
 
     <div class="ui checkbox"> 
 
      <input type="checkbox" id="id2" name="id2" value="1" tabindex="0" /> 
 
      <label>Additional information about widgets</label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="extraColumn" class="eight wide column"> 
 
    <div class="ui raised segment"> 
 
     <h3>Question 1</h3> 
 
     <div class="field"> 
 
     <div class="ui checkbox"> 
 
      <input type="checkbox" id="content_1" name="content_1" value="1" tabindex="0" /> 
 
      <label>Include Sprockets</label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="ui raised segment"> 
 
     <h3>QUestion 2</h3> 
 
     <div class="field"> 
 
     <div class="ui checkbox"> 
 
      <input type="checkbox" id="content_2" name="content_2" value="1" tabindex="0" /> 
 
      <label>Don't include sprockets</label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>