容器底部的顯示行

Question

似乎被卡在了應該是一件小事上。我有像這樣

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

節元素我所做的是由這部分的視口的高度本條內做

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

現在我有兩行。第一行應該顯示在最上面，所以我真的不需要這樣做。我需要在該部分的底部顯示第二行。要做到這一點，我本以爲我需要首先給容器100％的高度，但這似乎並沒有改變它的高度。我能夠得到容器100％的唯一方法是再次使用100vh，但看到它是該部分的孩子，爲什麼100％不工作？

即使當我使用100vh獲得它100％，我似乎無法得到容器底部的行。我會如何去做這件事？

我已成立了一個例子JSFiddle

感謝

Answer 1

您可以使用display：彎曲這一點。從我理解你想要的行之一顯示在部分的頂部和其他底部

Div有100％的高度和寬度的身體也應該有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」行的位置設置正確的「的margin-top」在文件準備：

該行的位置是：部分減去行的高度的總高度。

的片段：

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