У мене є макет з двома колонками, бічною панеллю і основним змістом, які потрібно розтягнути висота браузера. Тому, 100%, менша висота мого Twitter Bootstrap navbar що спочатку 40px у висоту. Це 40px зміни за допомогою CSS у програмі Twitter Bootstrap, якщо ви переглядаєте сторінку у вузькому браузері (як на мобільному пристрої). navbar, так це динамічно.
Я знаю, що я можу придумати JavaScript для налаштування top властивість "стиснути" мої колонки "висота. Але я дійсно хотів би це робити в 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 navbar тут: http://jsfiddle.net/flackend/MDZaG/
Збільшіть розмір веб-переглядача або кадр "результат", щоб побачити незгорені navbar.
Інший приклад і документація: http://twitter.github.com/bootstrap/components.html#navbar
EDIT 2
Вміст двох стовпців не впливатиме на висоту стовпців, вони завжди будуть 100% мінус висота navbar:
EDIT 3
Я змінив CSS вище і jsfiddle посилання так, що позиціонування absolute перешкоджати розгубленості.
ЗАКЛЮЧНА РЕДАКЦІЯ: ВИБРАНЕ РІШЕННЯ
Оскільки, схоже, не існує жодного CSS-рішення поза CSS3 calc, Я написав деякі js зробити фокус ...
Дивіться тут: http://jsfiddle.net/flackend/mu4Ey/5/
Я шукав через вихідний код JS Bootstrap і з'ясував, що вони обчислюють нову висоту від navbarс scrollHeight. Мій js робить те ж саме і анімує CSS top нерухомість з невеликим відставанням приховувати тіло. Це жахливе рішення, тому що Twitter Bootstrap міг би змінити швидкість анімації і зламати js.
Що я повинен Докладніше про те, як цільові браузери підтримують CSS3 calc і нехай вони використовують його і мають всі інші браузери використовувати js.
Відповіді:
1 для відповіді № 1Я не думаю, що це можливо. Не без використання функцій css3, які ще не мають належної підтримки браузера (наприклад, "flexbox", можливо, це вдасться досягти - я не зовсім впевнений, тому що ще не грав з цим. м чекає кращої підтримки).
Це, як кажуть, що я хотів би запропонувативикористовувати медіа-запити. Зрозумійте, де розташування розривається і додайте один навколо цієї точки, де ви "D" збільшити висоту і налаштувати верхнє значення для змісту і бічних панелей divs. оберіть елемент (або ваше власне зростаюче випадаюче меню), коли ви потрапите нижче певної ширини, і таким чином ви зможете зберегти "верх" і "висоту" без змін.
1 для відповіді № 2
Якщо вони завжди будуть на висоті 100%, тоді створіть 3 абсолютно позиціоновані розділи: