0

さて、ここで私の問題、私は私を作ろうとしています

<div id="content" style="margin:0 auto;"><!--AJAX Loaded Content--></div>

私の間のできるだけ多くの高さを取る

<div id="header" style="position:fixed;top:0;width:100%;height:300px;"></div>

と私

<div id="footer" style="position:fixed;bottom:0;width:100%;height:200px;"></div>

私が持っている唯一のCSSルールは

html,body{position:fixed;height:100%;width:100%;}

私は自分で使用height:100%;してみました#contentが、それでも表示されheight:auto;ます... また、全体がモバイルで適切に表示される必要があります。私の質問は次のとおりです。#content他の2つの間のスペース全体を取得するには、どのCSSルールを追加/削除する必要があり<div>ますか?

http://jsfiddle.net/8AQQg/2/

4

1 に答える 1

1

コメントで述べたように、固定された要素や絶対配置された要素の周りを流れることはできません。1 つの方法は、#header と #footer の高さと同じ上下の寸法を持つ絶対配置の div を使用することです。

http://jsfiddle.net/G3k54/2

html, body {
    position:fixed;
    height:100%;
    width:100%;
}
#header {
    position:fixed;
    top:0;
    width:100%;
    height:30px;
}
#footer {
    position:fixed;
    bottom:0;
    width:100%;
    height:20px;
}
#content {
    position: absolute;
    top: 35px;
    bottom: 25px;
    width: 100%;
}
于 2013-02-20T19:00:06.570 に答える