Display row at bottom of container - html

Question

seem to be stuck on what should be a trivial task. I have a section element like so
<section id="about">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-6">
<h2 class="section-heading">Some Header</h2>
</div>
</div>
<div class="row alignBottom">
<div class="col-xs-5 col-xs-offset-1">
<p>Some content</p>
</div>
<div class="col-xs-5 col-xs-offset-1">
<p>Some more content</p>
</div>
</div>
</div>
</section>
What I have done is made this section the height of the viewport by doing
#about {
background: #cccccc;
min-height: 100vh;
}
Now within this section I have two rows. The first row should display at the top, so nothing I really need to do with this. The second row I need to display at the bottom of the section. To do this, I would have thought I would need to give the container a 100% height first, but this does not seem to change its height. The only way I can get the container 100% is by using 100vh again, but seeing its a child of the section, why wouldnt 100% work?
Even when I do get it 100% using 100vh, I cant seem to get the row at the bottom of the container. How would I go about doing this?
I have set up an example JSFiddle
Thanks

Answer 1

You can use display:flex for this. From what i understood you want one of the rows to be display on the top of the section and other on the bottom
Div to have 100% height and width body should also need to have 100% width and height ,instead you can set 100vh height on about section and 100vh height on container
here is the snippet
#about {
background: #cccccc;
height: 100vh;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
}
.row {
display: flex;
border: 1px solid green;
}
.col {
margin-left: 15px;
}
<section id="about">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-6">
<h2 class="section-heading">Some Header</h2>
</div>
</div>
<div class="row alignBottom">
<div class="col col-xs-5 col-xs-offset-1">
<p>Some content</p>
</div>
<div class="col col-xs-5 col-xs-offset-1">
<p>Some more content</p>
</div>
</div>
</div>
</section>
Hope this helps

Answer 2

You can adjust the position of the "alignBottom" row setting the correct "margin-top" at document ready:
The position of this row is: total height of the section minus the height of the row.
The snippet:
$('.alignBottom').css('margin-top', $('#about').height() - $('.alignBottom').height());
html, body {
height:100%;
}
#about {
background: #cccccc;
min-height: 100vh;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section id="about">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-6">
<h2 class="section-heading">Some Header</h2>
</div>
</div>
<div class="row alignBottom">
<div class="col-xs-5 col-xs-offset-1">
<p>Some content</p>
</div>
<div class="col-xs-5 col-xs-offset-1">
<p>Some more content</p>
</div>
</div>
</div>
</section>