コンテナの底に表示する行

Question

は簡単な作業であるはずです。私は2つの行を持っている私は、このセクション内で今

#about { 
    background: #cccccc; 
    min-height: 100vh; 
} 

を行うことによって、このセクションにビューポートの高さに作られて行っているので、

<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> 

のようなセクション要素を持っています。最初の行が上部に表示されるはずです。実際にこれを行う必要はありません。 2行目はセクションの最後に表示する必要があります。これを行うには、コンテナの高さを最初に100％にする必要があると思っていましたが、高さを変えていないようです。私はコンテナ100％を得ることができる唯一の方法は、再び100vhを使用することですが、そのセクションの子供を見て、なぜwouldnt 100％の仕事ですか？

私が100vhを使って100％を得たとしても、コンテナの一番下に行があるようです。これをどうやってやりますか？このためにフレックス：

私はJSFiddle

おかげ

Answer 1

あなたは、ディスプレイを使用することができます例を設定しています。あなたが理解したところから、行の1つがセクションの上部に表示され、下部に表示されます。

Divは100％の幅と高さを持つ必要があります。ここ

コンテナ上のセクションと100VH高さに100VH高さを設定することができますスニペット

#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>

希望は、これは

を助けています

Answer 2

あなたは準備ができて、ドキュメントで正しい「マージントップの」設定「alignBottom」行の位置を調整することができます。この行の

位置は次のとおりです。セクションマイナス行の高さの合計の高さ。

スニペット：

$('.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>