固定フッターの下端の高さを自動調整する方法

アップロードした画像で述べたように、希望の結果を得たいと思います。固定フッターの下端の高さを自動調整する方法

私は常に領域Aと領域Cの間のマージンを20pxとしたいと考えています。画面サイズが変更された場合、領域Cは領域Aと領域Cの間の余白を常に20pxに保ちながら、ギャップを埋めるべきです（図2参照）。現在、画面サイズが変わるたびに領域Aと領域Cの間のギャップが増減しますそれは地域によって満たされるべきむしろ私はしたくないC.

index.htmlを

<!DOCTYPE html> 
    <html lang="en-US"> 
    <head> 
    <meta charset="UTF-8" /> 
    <title>Learn</title> 
    <link href = "styles.css" rel = "stylesheet"> 
    </head> 

    <body> 
    <div style="text-align:center;"> 
     <div class="boxA"> 
     <h2>A</h2> 
     <div class="boxD"><h2>D</h2></div> 
     <div class="boxD"><h2>D</h2></div> 
     </div> 
     <div class="boxB"> 
     <h2>B</h2> 
     </div> 
     <div class="boxC"> 
     <h2>C</h2> 
     </div> 
    </div> 
    </body> 
</html>

Styles.cssを

html, body { 
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
} 
body, h2{ 
    margin: 0; 
} 

.boxA{ 
    width: 500px; 
    height: 580px; 
    background-color: #006400; 
    margin-top: 20px; 
    margin-right: 20px; 
    display: inline-block; 
    margin-bottom: 0px; 
} 

.boxB{ 
    width: 300px; 
    height: 350px; 
    background-color: blue; 
    display: inline-block; 
} 

.boxC{ 
    width: 100%; 
    background-color: yellow; 
    margin-top: 20px; 
    position:absolute; 
    bottom: 0px; 
} 

.boxD{ 
    width:220px; 
    display: inline-block; 
    background-color: red; 
    margin-left:20px; 
    float:left; 
}

注：私はCSSでこれを実現したいです。 Javascriptはありません。

出典

2016-03-19 Raman Balyan

私は絶対にこの質問がupvotesを得た理由を理解することができません。私にとっては、それは典型的な*私のための仕事のための私のような - 怠惰な - （再）検索*質問のように見えます。ほとんどの場合、質問者以外の誰も回答から恩恵を受けることはありません。アップヴォートのラベルが明確に述べているように、「*この質問は研究努力を示しています;それは有用かつ明確です」*ありがとうございました。 –

flexboxプロパティは、ここに便利です。詳しくは、Mozilla Developer NetworkまたはCSS-Tricksをご覧ください。

CSS3フレキシブルボックス、又はフレキシボックスは、ページレイアウトが異なる画面サイズに対応しなければならないときに要素が予想に動作するように、ページ上の要素の配置を提供するレイアウトモードと異なる表示装置。多くのアプリケーションでは、フレキシブルボックスモデルでは、のブロックモデルに比べて浮動小数点数を使用していないし、フレックスコンテナの余白も内容の余白で崩壊することはありません。

あなたが提供したイメージを再現し、コンテンツとフッターの比率を4：1（または値の80％〜20％）に設定しました。以下のコードを見て、フルスクリーン版をチェックして正しく動作するか、this JSFiddleを確認してください。あなたは、あなたのニーズに値を変更することができますが、主な部分はこれです：それはニーズに合わせて様々な子要素に繰り返します

.wrapper { 
    display: flex; 
    flex-direction: column; 
    align-items: stretch; 
    align-content: stretch; 
    justify-content: flex-start; 
}

。

body, 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.wrapper { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: stretch; 
 
    align-content: stretch; 
 
    justify-content: flex-start; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    height: 80%; 
 
    width: 100%; 
 
    background: lightgray; 
 
} 
 

 
.green { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    margin: 20px; 
 
    width: 60%; 
 
    background: lightgreen; 
 
} 
 

 
.box { 
 
    width: calc(50% - 50px); 
 
    margin: 20px; 
 
    background: darkgreen; 
 
    box-sizing: border-box; 
 
} 
 

 
.blue { 
 
    margin: 20px; 
 
    width: 30%; 
 
    max-height: 50%; 
 
    background: blue; 
 
} 
 

 
.footer { 
 
    height: 20%; 
 
    background: lightblue; 
 
}

<div class="wrapper"> 
 

 
    <div class="container"> 
 

 
    <div class="green"> 
 
     a 
 
     <div class="box">d</div> 
 
     <div class="box">d</div> 
 
    </div> 
 
    
 
    <div class="blue"> 
 
    b 
 
    </div> 
 

 
    </div> 
 
    <div class="footer"> 
 
    c 
 
    </div> 
 

 
</div>

出典

2016-03-20 00:04:24 Roy

私は望みの結果を与えてくれませんが、解決策を考えてくれてありがとう。領域Cの高さは画面サイズによって変化しないので、領域Bが常に同じ行にあることは望ましくありません。 –

メディア照会を使用してエリアCの高さを調整することができます。エリアBも同じですが、すべてブラウザの幅に依存します。こちらをご覧ください：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries – Roy

実際には必要に応じて問題なく動作しています。それを間違って見た。ありがとう！ –

固定フッターの下端の高さを自動調整する方法

答えて

関連する問題