TwitterのブートストラップとRyan Faitのスティッキーフッターでレイアウトを作成しようとしています
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="user-panel">
<h1>Side Panel</h1>
</div>
<div class="content">
Hello World!
</div>
<div class="push"></div>
</div>
<div class="footer">
</div>
</body>
ユーザーパネルとコンテンツを 100% の高さに拡張できないようです。これらを試してみましたが、機能しません:
http://www.sitepoint.com/forums/showthread.php?868712-100-height-sidebar-background
http://fiddle.jshell.net/teresko/UG8Rk/show/ 丸い境界線が必要なので...
これがCSSです...
/* ヘッダー */
.ヘッダー {
高さ: 40px;
マージントップ: 0px;
境界線: 1px ソリッド #999;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
ボーダー半径: 0px 0px 5px 5px;
-webkit-box-shadow: #666 0px 1px 1px;
-moz-box-shadow: #666 0px 1px 1px;
ボックスの影: #666 0px 1px 1px;
背景: #F3F3F1;
背景: -webkit-gradient(linear, 0 0, 0 bottom, from(#F3F3F1), to(#2B2B2B) );
背景: -webkit-linear-gradient(#F3F3F1, #2B2B2B);
背景: -moz-linear-gradient(#F3F3F1, #2B2B2B);
背景: -ms-linear-gradient(#F3F3F1, #2B2B2B);
背景: -o-linear-gradient(#F3F3F1, #2B2B2B);
background: linear-gradient(#F3F3F1, #2B2B2B);
-pie-background: 線形勾配(#F3F3F1, #2B2B2B);
動作: url(/PIE.htc);
}
/* ヘッダーの終わり */
/* フッター */
.フッター {
マージントップ: 12px;
背景色: #000;
マージン底: 0px;
マージン右: 20px;
左マージン: 20px;
クリア: 両方;
高さ: 40px;
境界線: 1px ソリッド #999;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
ボーダー半径: 5px 5px 0px 0px;
-webkit-box-shadow: #666 0px 1px 1px;
-moz-box-shadow: #666 0px 1px 1px;
ボックスの影: #666 0px 1px 1px;
背景: #F3F3F1;
背景: -webkit-gradient(linear, 0 0, 0 bottom, from(#F3F3F1), to(#2B2B2B) );
背景: -webkit-linear-gradient(#F3F3F1, #2B2B2B);
背景: -moz-linear-gradient(#F3F3F1, #2B2B2B);
背景: -ms-linear-gradient(#F3F3F1, #2B2B2B);
背景: -o-linear-gradient(#F3F3F1, #2B2B2B);
background: linear-gradient(#F3F3F1, #2B2B2B);
-pie-background: 線形勾配(#F3F3F1, #2B2B2B);
動作: url(/PIE.htc);
}
/* フッターの終わり */
/* Ryan Fait によるスティッキーフッター...少しカスタマイズ*/
* {
マージン: 0;
}
html,本文{
高さ: 100%;
}
.wrapper {
パディング左: 20px;
右パディング: 20px;
最小高さ: 100%;
高さ: 自動!重要;
高さ: 100%;
マージン: 0 自動 -4em;
}
。押す {
高さ: 40px;
クリア: 両方;
}
/* スティッキーフッターの終わり*/
/* ユーザー パネル (左側にあるナビゲーションなどのサイドパネル) */
.ユーザーパネル {
境界線: 1px ソリッド #999;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
ボーダー半径: 5px 5px 5px 5px;
-webkit-box-shadow: #666 0px 1px 1px;
-moz-box-shadow: #666 0px 1px 1px;
ボックスの影: #666 0px 1px 1px;
背景: #F3F3F1;
背景: -webkit-gradient(linear, 0 0, 0 bottom, from(#F3F3F1), to(#2B2B2B) );
背景: -webkit-linear-gradient(#F3F3F1, #2B2B2B);
背景: -moz-linear-gradient(#F3F3F1, #2B2B2B);
背景: -ms-linear-gradient(#F3F3F1, #2B2B2B);
背景: -o-linear-gradient(#F3F3F1, #2B2B2B);
background: linear-gradient(#F3F3F1, #2B2B2B);
-pie-background: 線形勾配(#F3F3F1, #2B2B2B);
動作: url(/PIE.htc);
幅: 175px;
フロート: 左;
高さ: 継承;
背景: グレー;
}
/* ユーザーパネルの終わり */
どんな助けでも大歓迎です...ありがとう...
編集：
フィドルを提供してくれた Andrea Ligios に感謝します!
Firefox では問題なく動作しますが、Chrome では動作しません...