0

私は小さな問題に陥りました。ユーザーの垂直解像度の最大の高さになるように Web サイトを作成したいと考えています。これは私のhtmlです：

<div id="head"></div>
<div id="body"></div>
<div id="legs"></div>

そして、これは私のCSSです：

html {
    margin: 0;
    padding: 0;
}
#head {
    width: 100%;
    height: 65px;
    background-color: gold;
}
#body {
    width: 80%;
    height: 400px; /* This needs to be defined as remaining height */
    background-color: blue;
    margin: 0 auto;
}
#legs {
    width: 100%;
    height: 20px;
    background-color: gold;
}

そして、ここに jsfiddle http://jsfiddle.net/QgfJ3/embedded/result/があります。ご覧#headのとおり、高さは 65px で、高さ#legsは 20px です。#body問題は、ユーザーの解像度に応じて 's highを拡張したいということです。たとえば、ユーザーが 800x600 を持っている場合、#headの 65px と#legsの 20px を使用したことを意味し、合計で 85px になります。まだ 715px 残っているので、この高さを に設定するにはどうすればよい#bodyですか?

4

1 に答える 1

2

javascript または calc を使用する必要があります ( http://caniuse.com/calc )

jQuery メソッド:

$(window).on('resize', function() {
    $('#body').height($(window).height() - $('#head').height() - $('#legs').height());
});

Javascript (IE で動作するかどうかは不明):

window.addEventListener('resize', function() {
    document.querySelector('#body').style.height = window.innerHeight - 85 + 'px';
}, false);

計算:

#body {
    height: calc(100% - 85px);
}
于 2013-05-02T07:12:11.477 に答える