Twitter Bootstrap2 100% высокая отзывчивость

Question

Я хочу сделать отзывчивый макет с бутстрапом v2 twitter со столбцом и картой.

Идея состоит в том, чтобы создать такой интерфейс с сайта maps.google.com, но с помощью адаптивного дизайна с помощью bootstrap2.

Я хочу иметь стиль для рабочего стола с

• навигационной панелью на верхних
• 1 левой колонки (в боковом меню)
  • высота: 100% минус navbarHeight с скроллингом
  • ширина: .span3
• содержание, которое заполняет остальную часть экрана

Тогда для гибкого мобильного дизайна я хочу, чтобы части, которые имеют полную высоту, имели высоту в зависимости от содержимого.

Я сделал эскиз, чтобы лучше объяснить

EDIT: Глядя сделать что-то вроде this но отзывчивых, и только с севером (NavBar), западом (на боковую панель), и центр (содержание)

EDIT2: Я, наконец, сделал это с jquery, но мне нужно решение CSS. Если кто-то спросит, я отвечу в качестве ответа.

EDIT3: Хорошо, вот решение, которое я нашел с помощью JQuery (я думаю, что это легко сделать с помощью простых JS)

$(window).bind('resize', function() { 
    if ($(window).width() > 980) { 
     $("#content").height(($(window).height()-40)+"px") 
     $("#sidebar").height(($(window).height()-58)+"px") 
     $("body").css("padding-top","40px") 
    } 
    else { 
     $("#content").height(($(window).height()-50)+"px") 
     $("#sidebar").height(($(window).height()-68)+"px") 
     $("body").css("padding-top","0px")    
    } 

    $("#sidebar").css("overflow", "auto") 
    $("body").css("padding-bottom","0px") 
    $(".navbar").css("margin-bottom","0px") 
}); 

The $(selector).css() функций и условное if можно заменить простой CSS и медиа-запросы от CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive

Но проблема в том, что $(window).height() рассчитан во время выполнения. Это должно быть заменено, может быть, чем-то вроде height:100% в CSS, и это могло бы сделать трюк, но я не смог найти нужное место для размещения этой высоты 100%.

EDIT4: Здесь я нашел, что это может быть решение только для CSS! Если я успею, я отправлю ответ! http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

Answer 1

здесь является решением, которое я нашел с помощью JQuery (я думаю, что это легко сделать с помощью простых JS)

$(window).bind('resize', function() { 
    if ($(window).width() > 980) { 
     $("#content").height(($(window).height()-40)+"px") 
     $("#sidebar").height(($(window).height()-58)+"px") 
     $("body").css("padding-top","40px") 
    } 
    else { 
     $("#content").height(($(window).height()-50)+"px") 
     $("#sidebar").height(($(window).height()-68)+"px") 
     $("body").css("padding-top","0px")    
    } 

    $("#sidebar").css("overflow", "auto") 
    $("body").css("padding-bottom","0px") 
    $(".navbar").css("margin-bottom","0px") 
}); 

В $(selector).css() функции и условное if можно заменить простой CSS и медиа-запросы от CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive

Но проблема в том, что $(window).height() рассчитан во время выполнения. Это должно быть заменено, может быть, чем-то вроде height:100% в CSS, и это могло бы сделать трюк, но я не смог найти нужное место для размещения этой высоты 100%.

Answer 2

Я не уверен, что я полностью понимаю, что вы ищете, но взгляните на http://reactivewebdesign.net/Chicago/Traffic, который имеет верхнее меню (добавление начальной загрузки Navbar должно быть легко).

Левый столбец охватывает 3 столбца, а карта занимает 9 столбцов. В левом меню есть ссылка «Where Am I», которая также использует карту Google. Css для карты находится в верхней части страницы. Если вы хотите сжать карту на три столбца, просто отмените 3 & 9 до 9 & 3 - он все равно должен работать.

Надеюсь, это поможет.

Answer 3

Из моих исследований на этой неделе (я пытаюсь выполнить одно и то же), кажется, что bootstrap и 100% -ный дизайн несовместимы с чистой точкой зрения CSS (если вы не хотите вносить изменения в bootstrap). Мне было бы интересно увидеть ваше решение jquery.