Geek Answers Handbook

HTML5 mapping table for nested divs not working with Firefox and Opera

Have the following test code.

<!DOCTYPE html> <html style="min-width:100%;min-height:100%;height:100%;width:100%"> <body style="margin:0;min-width:100%;min-height:100%;height:100%;width:100%"> <div style="display:table;width:100%;height:100%;min-wight:100%;min-height:100%;"> <div style="display:table-row;background:red;">A</div> <div style="display:table-row;background:green;"> <div style="display:block;background:yellow;width:100%;height:100%;">B</div> </div> <div style="display:table-row;background:blue;height:50px;">C</div> </div> </body> </html>

In Firefox, it displays a yellow div small (as a table row, but display: block is set). Opera too. Chrome displays the yellow div at 100% the height of the green div (row table).

I need this to work in Firefox, Opera, IE> 8 just like in Chrome!

UPDATE:

I found the following problem:

 <!DOCTYPE html> <html style="min-width:100%;min-height:100%;height:100%;width:100%"> <body style="margin:0;min-width:100%;min-height:100%;height:100%;width:100%"> <div style="display:table;width:100%;height:100%;min-wight:100%;min-height:100%;"> <div style="height:50px;display:table-row;background:red;">A</div> <div style="display:table-row;background:green;"> <div style="display:table-cell;background:yellow;"> <div style="display:block;width:100%;height:100%;background:darkred;">B</div> </div> </div> <div style="display:table-row;background:blue;height:50px;">C</div> </div> </body> </html>

The darkreg div does not work in Opera!

+4
source share
2 answers

This is like everything being consistently displayed in IE, FireFox and Chrome:

 <!DOCTYPE html> <html style="min-width:100%;min-height:100%;height:100%;width:100%"> <body style="margin:0;min-width:100%;min-height:100%;height:100%;width:100%"> <div style="display:table;width:100%;height:100%;min-width:100%;min-height:100%;"> <div style="display:table-row;background:red;"> <div style="display:table-cell">A</div> </div> <div style="display:table-row;background:green;"> <div style="display:table-cell;background:yellow;width:100%;height:100%;">B</div> </div> <div style="display:table-row;background:blue;height:50px;"> <div style="display:table-cell">C</div> </div> </div> </body> </html>

The only difference is that I added display:table-cell divs in each table. It will have a height "C" of 50px, a minimum line of "A", and the rest will be filled with a yellow line of "B".

Looks like you can just leave by simply changing this inner “B” div from display:block to display:table-cell , but I find it best to always have a table-cell in your table-row (could I be wrong? )

Screenshot of all three browsers with my changes:

enter image description here

EDIT:

If you are trying to make your lines be of equal height, you can use this markup:

 <!DOCTYPE html> <html style="min-width:100%;min-height:100%;height:100%;width:100%"> <body style="margin:0;min-width:100%;min-height:100%;height:100%;width:100%"> <div style="display:table;width:100%;height:100%;min-width:100%;min-height:100%;"> <div style="display:table-row;background:red;height:33%"> <div style="display:table-cell">A</div> </div> <div style="display:table-row;background:green;height:33%"> <div style="display:table-cell;background:yellow;">B</div> </div> <div style="display:table-row;background:blue;height:33%;"> <div style="display:table-cell">C</div> </div> </div> </body> </html>

enter image description here

+3
source

If your goal is to have equal heights for all rows, it is better to use the correct table:

 <table style="width:100%;height:100%;"> <tr style="background:red;"> <td>A</td></tr> <tr style="background:green;"> <td style="background:yellow;">B</td> </tr> <tr style="background:blue;"> <td>C</td> </tr> </table>

Here's the script: http://jsfiddle.net/B5jUh/9/

0
source

More articles:


All Articles