0

2 つの要素を持つ単純なレイアウトを示す次の jsfiddle を作成しました。

http://jsfiddle.net/64kps/RUjj2

HTML

<div id="hello">hello hello hello hello hello hello hello</div>
<div id="donut">donut</div>

JavaScript

var hello = document.querySelector('#hello');
var donut= document.querySelector('#donut');

var resize = function (event) {
    var helloHeight = window.getComputedStyle(hello).height
    helloHeight = helloHeight.replace('px', '');
    helloHeight = parseFloat(helloHeight);

    donut.style.height = (window.innerHeight - helloHeight) + 'px';
};

window.addEventListener('resize', resize, false);
resize();

私の質問

黄色の要素は上部に固定されたままで、コンテンツに応じて必要な高さになります (高さは明示的に指定されていないことに注意してください)。

赤の要素は、ウィンドウを埋めるために利用可能な残りの垂直方向のスペースを取ります。

ウィンドウの幅が変化すると、黄色と赤の両方の要素の高さが変化することに注意してください。

純粋な CSS を使用し、JavaScript を使用する必要なくこれを達成する方法があるかどうか疑問に思っています。

ありがとう

4

3 に答える 3

3

ウィンドウを塗りつぶすには、body タグの背景を塗りつぶしの色に設定します。CSS は次のようになります。

body {
  background-color: red;
}
#hello {
  background-color: yellow;
  font-size: 50px;
}

#donut の背景色を設定する必要はありません。

于 2012-10-26T19:25:06.667 に答える
1

これを実現するには、ボディまたは親 div に特定の高さを与える必要があります。

#hello {
 background-color: yellow;
 font-size: 50px;
}
#donut {
 background-color: red;
 height:100%;
}
body{height:1000px;}​

http://jsfiddle.net/hillsons/vqAaE/

于 2012-10-26T19:13:04.683 に答える
0

here my solution to your problem

hrml:

<div id="asd">
    <div id="hello">hello hello hello hello hello hello hello</div>
    <div id="donut">donut</div>
</div>

css:

#hello {
    background-color: yellow;
    font-size: 60px;
}
#donut {
    background-color: red;
    height:100%;
}
#asd{
    position:absolute;
    height:auto;
    top:0;
    bottom:0;
}

i tested it on ie8+, ff16 chrome 22

fiddle link: http://jsfiddle.net/RUjj2/8/

于 2012-10-26T19:42:46.230 に答える