问题
I have a grid with 2 columns in it. In column one I have 1 raised segment, in column two I have 2 raised segments. Obviously, the second column will be larger. I need the segment in column one to take on full height. Any ideas?
Thanks!
<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>
回答1:
Semantic UI used CSS Flexbox, and grid
is declared in a way so that the heights of adjacent columns match. So all you need to do is make sure your left segment
has a height of 100% to fill the full height of your column
.
Result:
<div class="ui raised segment" style="height:100%;">
Snippet:
<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>
来源:https://stackoverflow.com/questions/34863591/height-issue-with-segment-inside-to-grid-column