jQuery Grid with Percentage Width

HTML

<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.columnsresize.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.pager.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
<div class="gridContainer">
    <div id="jqxgrid"></div>
</div>

CSS

body {
    background-color: #ffe;
}
.gridContainer {
    position:absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
}

JavaScript

var data = [
    ["Alfreds Futterkiste", "Maria Anders", "Germany"],
    ["Ana Trujillo Emparedados y helados", "Ana Trujillo", "Mexico"],
    ["Alfreds Futterkiste", "Maria Anders", "Germany"],
    ["Ana Trujillo Emparedados y helados", "Ana Trujillo", "Mexico"],
    ["Ana Trujillo Emparedados y helados", "Ana Trujillo", "Mexico"],
    ["Ana Trujillo Emparedados y helados", "Ana Trujillo", "Mexico"],
    ["Ana Trujillo Emparedados y helados", "Ana Trujillo", "Mexico"],
    ["Ana Trujillo Emparedados y helados", "Ana Trujillo", "Mexico"],
    ["Ana Trujillo Emparedados y helados", "Ana Trujillo", "Mexico"],
    ["Ana Trujillo Emparedados y helados", "Ana Trujillo", "Mexico"],
    ["Ana Trujillo Emparedados y helados", "Ana Trujillo", "Mexico"],
    ["Ana Trujillo Emparedados y helados", "Ana Trujillo", "Mexico"]

];

// prepare the data
var dataAdapter = new $.jqx.dataAdapter({
    localdata: data,
    datatype: "array"
});

$("#jqxgrid").jqxGrid({
    width: '100%',
    height: '100%',
    source: dataAdapter,
    pageable: true,
    columns: [{
        text: 'Company Name',
    }, {
        text: 'Contact Name',
    }, {
        text: 'Country',
    }]
});