CODEWITHSUNDEEP
mobiledesktoptwitter-bootstrapresponsive-design
jperelli
jperelli

Reputation: 7207

Twitter Bootstrap2 100% height responsive

I want to make a responsive layout with twitter's bootstrap v2, with a column and a map.

The idea is to build a UI like that from maps.google.com, but using a responsive design with bootstrap2.

I want to have a style for desktop with

Then for the responsive mobile design I want the parts that have the full height to have a height depending on the content.

I made a sketch to explain better sketch

EDIT: Looking to do something like this but responsive, and only with north (navbar), west (sidebar), and center (content)

EDIT2: I finally made it with jquery, but I want a CSS solution. If someone asks, I will put the solution as an answer.

EDIT3: Ok, here is the solution I found using JQuery (I think it's easy to do with plain 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() functions and the conditional if could be replaced with plain css and the media queries from CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive

But the problem is that $(window).height() is calculated runtime. That should be replaced maybe by something like a height:100% in CSS, and that could do the trick, but I couldn't find the right place to put that 100% height.

EDIT4: Here I found what it could be a CSS-only solution! If I make progress, I'll post the answer! http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

Upvotes: 22

Views: 6300

Answers (3)

jperelli
jperelli

Reputation: 7207

here is the solution I found using JQuery (I think it's easy to do with plain 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() functions and the conditional if could be replaced with plain css and the media queries from CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive

But the problem is that $(window).height() is calculated runtime. That should be replaced maybe by something like a height:100% in CSS, and that could do the trick, but I couldn't find the right place to put that 100% height.

Upvotes: 0

OfficerJoe
OfficerJoe

Reputation: 45

From my investigations this week (I'm trying to accomplish the same thing), it seems like bootstrap and a 100%-height design are incompatible from a pure CSS perspective (unless you want to make changes to bootstrap). I'd be interested in seeing your jquery solution.

Upvotes: 1

Gfw
Gfw

Reputation: 669

I'm not sure that I totally understand what you are looking for, but take a look at http://reactivewebdesign.net/Chicago/Traffic which has a top menu (adding the bootstrap navbar should be easy).

The left column spans 3 columns and the map occupies 9 columns. There is also a link in the left menu named "Where Am I" that also uses a Google map. The css for the map is at the top of the page. If you are looking to squeeze the map into three columns, merely reverse the 3 & 9 to 9 & 3 - it should still work.

Hope this helps.

Upvotes: 0

Related Questions