残りのdivの高さに画像を入力してください

Question

私はいくつかのグーグルをやっていますが、私が探しているものは答えが見つからないので、一見単純なことは非常に複雑なようです。

私がしたいことは、2つのdivを持つことです。レンダリングに本当に必要なだけの高さが必要です。

2番目のdivは残りのスペースを画像で埋める必要があります（画像の高さは100％です）。残りの高さを埋めるようにします。私は現在、午前どこ

これは、次のとおりです。http://jsfiddle.net/4rcmnu0z/

私はフレキシボックスとテーブルの行でこれを行うにはどのように多くの例を見てきました、しかし彼らは、画像自体では動作しませんでした。

<section> 
    <header> 
    header: sized to content 
     <br/>this height grows as we have more content here. 
    </header> 
    <div> 
    main content: (this fills remaining height) this cat picture should have height 100%<br> 
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> 
    <!-- uncomment to see it break --> 
    x<br>x<br>x<br>x<br> 
    <!-- --> 
    </div> 
</section> 

CSS：

html, body { height: 100%; } 
section { 
    display: flex; 
    flex-flow: column; 
    height: 100%; 
} 
header { 
    background: tomato; 
} 
div { 
    flex: 2 ; 
    background: gold; 
    overflow: auto; 

    background-position: center center; 
    background-size:auto 100%; 
    background: url('http://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg') no-repeat; 
} 
footer { 
    background: lightgreen; 
    min-height: 60px; 
} 

Answer 1

ために背景の設定を定義してくださいを働くことを願っています。それは問題でした、あなた自身のCSS自体はうまく動作しています。小さな変更を加えました。bodyとhtmlタグのマージンを0に設定しました。これでスクロールバーが削除されました。

私の下のデモをチェックしてください。

JSFiddle Demo

CSS：私はこの上であまりにも多くの時間を費やし

html, body { height: 100%;margin:0px; } 
section { 
    display: flex; 
    flex-flow: column; 
    height: 100%; 
} 
header { 
    background: tomato; 
} 
div { 
    flex: 2 ; 
    background: gold; 
    overflow: auto; 
    background: url('http://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg') no-repeat; 
    background-size: auto 100%; 
    background-position: center center; 
} 
footer { 
    background: lightgreen; 
    min-height: 60px; 
} 

Answer 2

html, body { min-height: 100%; } 
section { 
display: flex; 
flex-flow: column; 
height: 100%; 
} 
header { 
background: tomato; 
flex: 1; 
} 
div { 
min-height: 100%; 
background: gold; 
overflow: auto; 
background-position: center center; 
background-size:auto 100%; 
background:url('http://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg') no-repeat; 
} 

変更これはあなたのCSSでは、それが動作ホープ:)

Answer 3

あなたは、バックグラウンドのURLの後にbackground-positionとbackground-sizeを適用する必要があります。画像をdivに伸ばしてbackground-size: coverとする。

html, body { min-height: 100%; } 
section { 
display: flex; 
flex-flow: column; 
height: 100%; 
} 
header { 
background: tomato; 
flex: 1; 
} 
div { 
min-height: 100%; 
background: gold; 
overflow: auto; 
background: url('http://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg') no-repeat; 
background-position: center center; 
background-size:cover; 
} 

私は、これは