Вопросы Теги

Twitter Bootstrap2 100% адаптируется к высоте

Я хочу сделать адаптивную верстку с помощью twitter bootstrap v2, с колонкой и картой.

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

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

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

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

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

РЕДАКТИРОВАТЬ:Хотите сделать что-то вроде этого, но отзывчивого, и только с севером (навигационная панель), западом (боковая панель) и центром (контент)

РЕДАКТИРОВАТЬ2:I наконец-то сделал это с 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

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

22
задан jperelli 23 October 2012 в 22:39
поделиться