html - Min-height の div と 100% の別の div

Question

私はdiv別の内部を持っていますdiv

最初divの最小高さは 800px です

2 番目divの高さは 100% です。

div2番目の高さを最初のものと同じにしたい。

しかし、私はこれを取得します: http://jsfiddle.net/gW4Hh/

どんな方法でも可能ですか??

ありがとう！

Answer 1

継承を使用するのは簡単です

#container{
width: 100%;    
min-height: inherit;
background-image: linear-gradient(#a8a8a8, #ebebeb);
}

Answer 2

次のように、2 番目の div にposition: relativeandを使用することもできます。position:absolute

.screen{
    position: relative;
    width: 480px;
    min-height: 800px;
    background: #F3E2A9;
    box-sizing: border-box; 
    margin: 0 auto; /* Centramos la pantalla */

}

#container{
    width: 100%;
    position: absolute;
    height: 100%;
    background-image: linear-gradient(#a8a8a8, #ebebeb);
}

これを行うことで、2 番目の div を親に配置された要素に絶対に配置します。これにより、次を使用できるようになります。height: 100%

Answer 3

これを試して

CSS

body, html{
    height:100%;
}

.screen{
    width: 480px;
    height:100%;
    min-height: 800px;
    background: #F3E2A9;
    box-sizing: border-box; 
    margin: 0 auto; /* Centramos la pantalla */
}
#container{
    width: 100%;
    height: 100%;
    background-image: linear-gradient(#a8a8a8, #ebebeb);
}

jsFiddle ファイル

Answer 4

このプロパティを次のように変更できます。

#container{
    width: 100%;
    min-height: inherit;
    background-image: linear-gradient(#a8a8a8, #ebebeb);
}