ライアンのフットスティックフッタのヘッダーとフッターの間のスペースを分割する方法

Question

私はRyan fait sticky footerを使用しています。それはうまくいく。しかし、私は赤とピンクの箱のように表示したい

<div class='content'> 
     <div class='firstdiv'> 
     </div> 
     <div class='seconddiv'> 
     </div> 
    </div> 

のようなdivを持ってFiddle

ここフィドル

の下のようにヘッダーとフッターの間にスペースを分割する必要があります。問題は、または second divに十分なコンテンツ（画面以上）がある場合は display:flexのように同じに成長する必要があるが、十分な内容の全ページをカバーする必要がない場合、私は contentの高さがないということです。どのように私はこれを達成することができます。

Answer 1

これを試してください。高さはコンテンツによって異なります。手動で高さを設定することもできますが、メディアクエリのためのスタイリングも作成する必要があります。

* { 
 
    margin: 0; 
 
} 
 
html, body { 
 
    height: 100%; 
 
} 
 
.wrapper { 
 
    min-height: 100%; 
 
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */ 
 
    height: 100%; 
 
    margin: 0 auto -55px; /* the bottom margin is the negative value of the footer's height */ 
 
} 
 
.footer, .push { 
 
    height: 55px; /* .push must be the same height as .footer */ 
 
} 
 

 

 
.content{ 
 
    display: inline-flex; 
 
    justify-content: space-around; 
 
    width: 100%; 
 
    height:100%; 
 
    //background-color:red; 
 
} 
 

 
.firstdiv{ 
 
    width: 25%; 
 
    border: 2px solid red; 
 
    height: 100px; 
 
} 
 
.seconddiv { 
 
    width: 75%; 
 
    border: 2px solid green; 
 
    height: 100px; 
 
}

<div class="wrapper"> 
 

 
     <div class="header"> 
 
     <h1>CSS Sticky Footer</h1> 
 
     </div> 
 
     
 
     <div class='content'> 
 
      <div class='firstdiv'> 
 
      </div> 
 
      <div class='seconddiv'> 
 
      </div> 
 
     </div> 
 
     
 
</div> 
 

 
<div class="footer"> 
 
    <p>This <strong>CSS Sticky Footer</strong> simply stays put.</p> 
 
    <p class="copyright">Copyright &copy; 2016 Ryan Fait &mdash; <a href="http://ryanfait.com/" title="Las Vegas Web Design">Las Vegas Web Design</a></p> 
 
</div>