ブラウザーの高さを伸ばす必要があるサイドバーとメイン コンテンツの 2 つの列を含むレイアウトがあります。したがって、最初は高さになっ100%ている Twitter Bootstrap の高さを減らします。ページを狭いブラウザー (モバイル デバイスなど) で表示している場合は、Twitter Bootstrap CSS によって変更されます。新しい高さは のリンク数に基づいているため、動的です。navbar40px40pxnavbar
top列の高さを「縮小」するようにプロパティを調整する JavaScript を考え出すことができることはわかっています。でも、できればCSSでやりたいです。
を変更して列を重ねることはできないことに注意してくださいz-index。
ここで実際のモデルを参照してください: http://jsfiddle.net/flackend/mu4Ey/3/
レイアウト
+ - - - - - - - - - - - - - - - - - - - - +
| navbar |
+ - - - + - - - - - - - - - - - - - - - - +
| | |
|< 20% >|<-- 80% ------------------------>|
| | |
| | Google Maps API map contained |
| | here. |
| | |
| | |
| | |
| | |
+ - - - + - - - - - - - - - - - - - - - - +
CSS
.sidebar, .content {
position: absolute;
top: 40px;
bottom: 0;
}
.sidebar {
left: 0;
right: 80%;
}
.content {
left: 20%;
right: 0;
}
助けてくれてありがとう！
編集
ここで Twitter Bootstrap の例を参照してくださいnavbar: http://jsfiddle.net/flackend/MDZaG/
ブラウザーまたは「結果」フレームのサイズを大きくして、折りたたまれていない を表示しnavbarます。
別の例とドキュメント: http://twitter.github.com/bootstrap/components.html#navbar
編集2
2 つの列の内容は、列の高さに影響しません。それらは常に100%の高さを引いたものになりnavbarます:
編集3
上記の CSS と jsfiddle リンクを変更して、配置がabsolute混乱を避けるようにしました。
最終編集: 選択されたソリューション
CSS3 を超える CSS ソリューションはないように思われるのでcalc、そのトリックを実行するためにいくつかの js を作成しました...
こちらをご覧ください：http://jsfiddle.net/flackend/mu4Ey/5/
Twitter Bootstrap js のソース コードを調べたところ、新しい高さを から計算していることがわかりましnavbarたscrollHeight。私の js も同じことをtop行い、本体を非表示にするためにわずかな遅れで CSS プロパティをアニメーション化します。Twitter Bootstrap がアニメーションの速度を変更し、js を壊す可能性があるため、これは恐ろしい解決策です。
私がすべきことは、CSS3 をサポートするブラウザーをターゲットにしてcalc、それを使用させ、他のすべてのブラウザーに js を使用させる方法を見つけることです。