title: jquery mobile ui-grid with ui-blocks of equal height
body: <p>I'm trying to use the built-in ui-grid in jquery mobile for a 3 column layout.</p>
  
  <p>The problem are the ui-bars inside the ui-blocks when they have a different height. I'd like to have all 3 columns to have the same height as the highest column.</p>
  
  <p>Does anyone know a simple solution to this problem? I'd like to solve it with just CSS but I didn't manage it. Is JS really the only solution to this problem?</p>
  
  <p>JsFiddle:
  <a href="http://jsfiddle.net/zHbuC/466/" rel="nofollow">http://jsfiddle.net/zHbuC/466/</a></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;div data-role="page" id="station" class="type-home"&gt;
      &lt;div data-role="header"&gt;&lt;h1&gt;Header Page 1&lt;/h1&gt;&lt;/div&gt;
  
      &lt;div data-role="content" data-theme="b"&gt;
          &lt;div class="ui-grid-b" style="text-align:center"&gt;
              &lt;div class="ui-block-a"&gt;
                  &lt;div class="ui-bar ui-bar-c"&gt;A&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="ui-block-b"&gt;
                  &lt;div class="ui-bar ui-bar-c"&gt;B&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="ui-block-c"&gt;
                  &lt;div class="ui-bar ui-bar-c"&gt;
                      &lt;p&gt;B with alot of text&lt;/p&gt;
                      &lt;p&gt;with lots of lines&lt;/p&gt;
                      &lt;p&gt;another line&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div data-role="footer"&gt;&lt;h4&gt;Footer&lt;/h4&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>