サイズを変更するとdivが上に上がります

Question

これはおそらく簡単な修正ですが、何が間違っているのか分かりません。私は必要でないすべてを削除しましたので、コードが読まれてもそれほど悪くはありません。

基本的には、ページを下ろし、幅を小さくすると、フッター（接触）が上のdivと重なって表示されます。コードペン上ですでに重なっています。

HTML：

<div class="library library-row specialties"> 
     <div class="container"> 
      <div class="desc"> 
       <h1>Our Specialties<br/></h3> 
       <p> 
        Everything we can do for you 
       </p> 
      </div> 
      <div class="row row-images"> 
       <div class="col-sm-4"> 
        <i class="fa fa-database" aria-hidden="true"></i> 
        <h4>Databases</h4> 
       </div> 
       <div class="col-sm-4"> 
        <i class="fa fa-server" aria-hidden="true"></i> 
        <h4>Servers</h4> 
       </div> 
       <div class="col-sm-4"> 
        <i class="fa fa-cloud" aria-hidden="true"></i> 
        <h4>Cloud Integration</h4> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="footer library library-row"> 
     <div class="container"> 
      <div class="accounts"> 
       <i> 
        <a href="#" class="fa alt fa-facebook"></a> 
        <a href="#" class="fa alt fa-twitter"></a> 
        <a href="#" class="fa alt fa-instagram"></a> 
        <a href="#" class="fa alt fa-github"></a> 
        <a href="#" class="fa alt fa-envelope"></a> 
       </i> 
      </div> 
     </div> 
    </div> 

CSS：（私はトラブルにそれを貼り付けを抱えている、申し訳ありませんが、コードペンからそれを入手してください）

コードペン：再びClick Here

、申し訳ありませんこれが基本的な修正である場合。私は試しましたが、何が間違っているのか分かりません。

Answer 1

divに高さを固定している.specialtiesにCSSが適用されています。フッターはそのdivの下に配置されますが、.specialties divのコンテンツはdivの外側に垂直にオーバーフローしているため、フッターの下と下にコンテンツがレンダリングされます。

この高さを削除：100vh; CSSがあり、これがなぜ起こっているのかが分かります。おそらくリファクタリングが必要です。設計意図を説明できるのであれば、私は助けてくれるでしょう。

.specialties { 
    height: 100vh; 
}