3

この手法をスティッキーフッターに使用して、この例を挙げてください。

* { margin:0; }
html, body { height:100%; }
#wrap { 
    min-height:100%;
    height:auto !important;
    height:100%;
    margin:0 0 -47px;
}
#side { float:left; background:#ccc; width:100px; overflow:hidden; }
#body { float:left; background:#aaa; width:300px; }
#foot, .push { height:47px; }
#foot { background:#eee; }

ヘッダーとフッターの間のスペースをサイドバーやコンテンツ ボックスで埋めるにはどうすればよいでしょうか?

高さを 100% に設定してみましたが、(驚くことではありませんが) かからないようです。また、大きな画面では壊れてしまうため、固定の高さを設定することはできません。

誰でもこれに光を当てたいですか？

編集: この質問に対して選択された回答は、半透明のフッターを含むデザインでは機能しません。ここに表示: http://jsfiddle.net/AfwzD/23/

そのため、これを質問に追加したいと思います。このタイプのデザインではどのように機能させますか?

4

3 に答える 3

2

これは少しトリッキーです。私が見つけた唯一の方法は、それを補うために巨大なパディングボトムと反対側のマージンを設定することです。さらに、あなたは与える必要があります#wrap overflow: hidden：

#body {
    ...
    padding: 80px 20px 1050px;
    margin-bottom: -1000px;
}

デモ: http://jsfiddle.net/AfwzD/21/

于 2013-03-29T17:31:14.247 に答える
0

あなたはjavascriptを介してのみそれを行うことができます. なんかこう。

window.addEventListener("resize", function ()
{
    /*var nContentHeight = window.innerHeight - headerHeight - footerHeight;*/
});
于 2013-03-29T17:29:22.310 に答える
0

フローティング要素をクリアして、ページのフローに戻す必要があります。

HTML

<div id="side">...</div>
<div id="body">...</div>
<div class="clear"></div>

CSS

.clear { clear:both; }
于 2013-03-29T17:29:32.987 に答える