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
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/
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With