Height differences in browsers

E9B6

I have a db of names accessed via mysql and php. The resultant list could be one or one hundred names.

I display them in a div where I set the style:height equal to the number of names x 1.25 ems. Works a treat BUT in IOS8 [ipad] the names spill over the bottom of the div. I can increase the calculation but then I am left with a blank area of about 1 inch on PCs. I have tried usings px and % and get the same results.

Shouldn't they all be the same? [fool I hear you say!!]

But is there any easy way to ensure that the carefully planned display is the same on all the platforms?

CRG

Derokorian

Don't use height to make this work. Unless i'm missing something, divs automatically resize to their contents, example can be seen here http://jsfiddle.net/bncxqmp4/1/ by repeatedly hitting the button.

If however, what you're trying to achieve is spacing around the contents, you'd be better off using margin and/or padding on the div or its contents.

E9B6

Derokorian;11044521 wrote:
Don't use height to make this work. Unless i'm missing something, divs automatically resize to their contents, example can be seen here http://jsfiddle.net/bncxqmp4/1/ by repeatedly hitting the button.

If however, what you're trying to achieve is spacing around the contents, you'd be better off using margin and/or padding on the div or its contents.

I will expand a little. I have two div columns left and right and the names go into the right column. I need to make both divs the same height hence setting the height in the style:height. This is so the following div which is page width follows the overall design. If I do not set the height they are both different which looks horrible. If I could somehow "read" the height of the right column and set it for the left, that would work, but I haven't sussed that one yet.

Cheers
CRG

Derokorian

Then try using display: table-cell on the "column" divs. Updated jsfiddle to show you -> http://jsfiddle.net/bncxqmp4/2/