ウィンドウ画面のサイズに応じて高さを調整するサイトを作成しました。つまり、スクロールはありません。期待どおりに正常に動作しますが、Windows XP のクロムでは正常に動作しません。Windows 7 のクロムでも正常に動作します。
ここにjsfiddle デモがあります。
HTML:
<section id="mainWrapper">
<header>Header Content</header>
<div>panel Content</div>
<footer>Footer Content</footer>
</section>
CSS:
#mainWrapper {
background: pink;
overflow: hidden;
position: relative;
/*padding-bottom: 50px;*/
}
header {
background: yellow;
height: 85px;
}
footer {
background: orange;
overflow: hidden;
position: absolute;
left:0;
bottom:0;
height:30px;
width:100%;
}
div {
background: purple;
margin-top: 10px;
}
Javascript:
var bodyheight = $(document).height();
$("#mainWrapper").height(bodyheight);
$("div").height($('#mainWrapper').height() - $("header").height() - $("footer").height() - 20);
Browser Shotからのさまざまなブラウザーのスナップショット
何度も検索して何度も試しましたが、この問題を修正できませんでした。私の質問が明確であることを願っています。
これは、chorme-windows xp から取得したスクリーン ショットです。
