スティッキーフッターは山車

Question

で作業していないここに私のcodepenを参照してください：codepen

を私はページの下部に常にフッターを維持しようとしている、と私はCSS-トリックサイトからスティッキーフッターのコードを試してみましたが、私は、コード内の浮動要素がフッターが底にくっつかないようにしていると思います。この周りのアイデアですか？

Tks！ EDITED

* { 
 
    box-sizing: border-box; 
 
    font-family: "Times New Roman", serif; 
 
} 
 
body { 
 
    position: relative; 
 
    height: 100%; 
 
} 
 
.main-container { 
 
    min-height: 100%; 
 
    margin-bottom: -3rem; 
 
} 
 
.main-container:after { 
 
    content: ""; 
 
    display: block; 
 
} 
 
section { 
 
    width: 100%; 
 
} 
 
.hero-section { 
 
    width: 100%; 
 
    height: 700px; 
 
    background: white url("http://www.placehold.it/1600x700") no-repeat fixed center; 
 
} 
 
.large-text { 
 
    font-size: 5.2rem; 
 
    font-weight: 500; 
 
} 
 
.medium-text { 
 
    font-size: 2.1rem; 
 
    font-weight: 100; 
 
} 
 
.small-text { 
 
    font-size: 1.2rem; 
 
} 
 
.generic-section { 
 
    margin-top: 5rem; 
 
} 
 
.generic-center-text { 
 
    width: 70%; 
 
    margin: 0 auto; 
 
} 
 
.generic-left-image { 
 
    float: left; 
 
    width: 30%; 
 
} 
 
.generic-right-text { 
 
    float: right; 
 
    width: 65%; 
 
    padding: 3%; 
 
    border: 1px solid red; 
 
    margin: 0; 
 
} 
 
.section-center { 
 
    text-align: center; 
 
} 
 
footer { 
 
    border: 1px solid red; 
 
    width: 100%; 
 
} 
 
footer, 
 
main-container:after { 
 
    height: 3rem; 
 
}

<div class="main-container"> 
 

 
    <!--hero banner section--> 
 
    <section class="hero-section"> 
 
    <h1 class="large-text">Lorem Ipsum</h1> 
 
    <h2 class="medium-text">12 Nov 1929 – 14 Sep 1982</h2> 
 
    </section> 
 

 

 
    <!-- intro section --> 
 
    <section class="generic-section section-center"> 
 
    <img src="http://placehold.it/70x70" alt="" /> 
 
    <h2>Lorem Ipsum dolor sit amet</h2> 
 
    <p class="generic-center-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue quam in sodales cursus. In id est vel sapien posuere dictum. Nulla ultricies mi quis odio condimentum, nec porta ex varius. Vivamus imperdiet ante at viverra scelerisque.</p> 
 
    </section> 
 

 

 
    <!-- details section --> 
 
    <section> 
 
    <img class="generic-left-image" src="http://www.placehold.it/400x500" alt="" /> 
 
    <p class="generic-right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque dui eget arcu aliquam, eu eleifend est feugiat. In ac purus a mi suscipit congue et eu enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus 
 
     mus. Proin at aliquam odio. Suspendisse dapibus imperdiet fringilla. Proin pulvinar luctus orci. Sed ut eros condimentum, pretium neque eu, finibus nunc. Vestibulum bibendum condimentum cursus. Nulla id nibh at nisi venenatis egestas vitae sed arcu. 
 
     Maecenas posuere tempor semper. Curabitur eu pulvinar sem, in cursus nisi. Morbi semper, lacus in euismod accumsan, diam felis fermentum urna, quis viverra risus sapien sed nisi. Integer ac convallis nunc, eu gravida metus. Ut et consequat purus. 
 
     Morbi volutpat placerat erat, nec facilisis dolor aliquet quis. Aliquam urna tortor, tempor in justo nec, vehicula vestibulum augue.</p> 
 
    </section> 
 

 

 
    <!-- footer section --> 
 
    <footer>Copyright © 2016 Nikar</footer> 
 

 
</div>

Answer 1

：あなたはフレキシボックスを使用することができます固定位置としてそれを持ってすることなく、だから、

以下は私のコードです。ここで

は、私が行っです：

.flex-container { 
     display: -webkit-flex; 
     display: flex; 
     width: 100%; 
    } 

    .flex-item1 { 
     width: 25%; 
     margin: 10px; 
    } 

    .flex-item { 
     width: 75%; 
     margin: 10px; 
    } 

その後、HTML：

<div class="flex-container"> 
    <div class="flex-item1"> 
     <img src="http://www.placehold.it/400x500" alt="" /> 
    </div> 
    <div class="flex-item"> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque dui eget arcu aliquam, eu eleifend est feugiat. In ac purus a mi suscipit congue et eu enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus 
      mus. Proin at aliquam odio. Suspendisse dapibus imperdiet fringilla. Proin pulvinar luctus orci. Sed ut eros condimentum, pretium neque eu, finibus nunc. Vestibulum bibendum condimentum cursus. Nulla id nibh at nisi venenatis egestas vitae sed arcu. 
      Maecenas posuere tempor semper. Curabitur eu pulvinar sem, in cursus nisi. Morbi semper, lacus in euismod accumsan, diam felis fermentum urna, quis viverra risus sapien sed nisi. Integer ac convallis nunc, eu gravida metus. Ut et consequat purus. 
      Morbi volutpat placerat erat, nec facilisis dolor aliquet quis. Aliquam urna tortor, tempor in justo nec, vehicula vestibulum augue. 
     </p> 
    </div> 
</div> 

これは、ページの下部にフッターを保持します。