Незначительные изменения в более ранней версии - проверены на CHROME
function PrintElem(elem)
{
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
mywindow.document.write('<html><head><title>' + document.title + '</title>');
mywindow.document.write('</head><body >');
mywindow.document.write('<h1>' + document.title + '</h1>');
mywindow.document.write(document.getElementById(elem).innerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
return true;
}
Вы установили высоту #innercontainer равной 100%, но не установили ее относительно чего-либо, поэтому она примет высоту тела в этом случае. Что-то вроде этого должно помочь вам в этом:
#maincontainer {
position:relative;
height:500px;
background-color:lightgrey;
}
#innercontainer {
height:100%;
overflow: scroll;
overflow-x: hidden;
}
#listrow {
positon: relative;
height: calc(100% - 50px);
}
#headerrow {
background-color:grey;
height:50px;
}
В качестве sidenote, bootstrap поставляется с хорошим стилем таблицы , который, я думаю, является хорошим примером для того, что вы пытаетесь создать .
Вы можете добавить этот код CSS
#listrow {
background-color:lightgrey;
}