Подтвердить что ты не робот

Twitter Bootstrap2 100% высокая чувствительность

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

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

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

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

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

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

РЕДАКТИРОВАТЬ: Ищете что-то вроде это, но отзывчивое, и только с севера (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")
});

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

Но проблема в том, что $(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/

4b9b3361

Ответ 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%.

Ответ 2

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

Ответ 3

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

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

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