CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
katie hudson
katie hudson

Reputation: 2893

Display row at bottom of container

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

Upvotes: 0

Views: 1165

Answers (2)

gaetanoM
gaetanoM

Reputation: 42054

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>

Upvotes: 1

Geeky
Geeky

Reputation: 7496

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

Upvotes: 1

Related Questions