How to size a content div to cover the entire content area in jQuery Mobile

Tags: android,css,google-chrome,openlayers,jquery-mobile

Problem :

I started a simple jQuery Mobile Page with a header and a content div. The content div should serve as a map container for openlayers. The map should fill up the entire screen, except for the header bar.

Sizing the content div with a width/height of 100% didn't work (nothing was displayed), so I'm looking for a CSS approach to pixel-size the div or a relative-size workaround.

Especially I like to know:

  • How can I account for screen orientation changes (landscape/portrait)?
  • How can I make my layout "height-elastic", i.e. resistant to the toggling of the browser's address bar?

Here is my markup so far:


<div data-role="page">

<div data-role="header">
    <h1>My Map</h1>

<div id="mapcontainer"  data-role="content">
     <!-- OpenLayers Map goes here -->          



Solution :

OpenLayers listens for the window 'resize' event and automatically calls map.updateSize(). Nothing to do here.

In my case, without header, the following code works:

<div data-role="page" id="map">
     <div id="olmap"></div>

#olmap, #map {
    height: 100%;
    width: 100%;

    CSS Howto..

    What do i need and how do I start to adjust the css of a website with “encrypted” .gz files

    How to “crop” a rectangular image into a square with CSS?

    How to change color in first td in my table using class

    How to remove odd bottom padding from gradient inside a button on firefox?

    How to create a Page Header (an Image) for print using css

    How to invert the pentagon created using CSS?

    How to center align vertically the container in bootstrap

    How to test for css properties like modernizr.js

    How is percentage calculated when using it for margin and padding?

    How to make this css code (counters and ;before) cross browser compatible using jquery?

    How to use css media query to switch animations

    JavaScript -Change CSS color for 5 seconds - How to add easing effect?

    How to convert CSS into LESS when there are multiple classes using same properties

    How can I make a background image of a site start off fitting to screen and then zoomable?

    How to use 100% height with css

    How to slide a div out

    How to make existing javascript/css files be compitable in Google Chrome?

    How to display “Classic” fractions in CSS / Javascript

    PHP imagecopyresampled + how to get the best results

    How to apply css to iframe content? [closed]

    how does CSS float property combine when dealing with nested divs?

    Simple Form button submit doesn't show in IE 8-7

    How to fix flexbox position:fixed navbar JS/CSS bug

    How to remove and override CSS attribute from parent class?

    CSS: How to align table data

    How to override inline css from external class?

    How to copy this semi-static menu?

    How do you structure css files for a web project?

    how to vertical align a table inside a div

    HTML/CSS: How to center floating divs?