sonseiya sonseiya - 5 months ago 7x
HTML Question

How to set 2 rows height in percent using jquery mobile?

I want to define 2 rows in one page using jquery mobile, and I want to do it in percentage.

<div data-role="content">
<div id="divParteSuperior" style="height:300px;">
<div id="divParteInferior">

When I do using height it works, but I need to use percent, if I set height equal to 60%, it doesn't work. I have search if this could be done using jquery mobile grid, but it only talks about columns. I want to use all the entire height of the page.

I'm trying to do something like this:

What i want to do like

Could you help me please?

$("#divParteSuperior, #divParteInferior").height($(window).height()/2 + "px")

That's the jQ answer. And you might want to put that in $(window).resize();

The CSS answer would be:

1) Make the content inherit 100% height from the <body> and the <html> so that you can make the divs with % height

2) Use vh instead of % (not that well supported on mobile without a polyfill)

3) Use display table or flexbox