CSS issue with Opera browser

I have a simple page: 5 rows (4 rows explicitly defined height [header, bredcrumb, trademark, footer], 1 row set to 100% [content]) that all display on a web page.

However, my CSS renders perfectly in Firefox, Chrome, Internet Explorer and Safari. Opera hates me and adds a scrollbar.

How do I structure the CSS so that this fits all 5 browsers, without adding a scrollbar to ANY browser?

HTML:

<html>
<head>
</head>
<body>
<div class='header'>
</div>
<div class='breadcrumb'>
</div>
<div class='content'>
<div class='panels'>
<div class='panel-a'>
</div>
<div class='panel-b'>
</div>
<div class='panel-c'>
</div>
</div>
</div>
<div class='trademark'>
</div>
<div class='footer'>
</div>
</body>
</html>

CSS:

div.header,
div.breadcrumb,
div.content,
div.trademark,
div.footer {
display: table-row;
width: 100.00%;
}

div.header {                
height: 2em;
}

div.breadcrumb {            
height: 1.5em;
}

div.content {
height: 100%;
}

div.panels {
display: table-cell;
height: 100%;
width: 100%;
}

div.panel-table {
display: table;
height: 100%;
width: 100%;
}

div.panel-a,
div.panel-b,
div.panel-c {
display: table-cell;
}

div.trademark {
height: 1.25em;
}

div.footer {                
height: 2em;
}

Solution

I cannot test it due to not having opera but my guess would be that you need to remove padding and margins from body

html, body{
 padding: 0;
 margin: 0;
}