JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<body>
<div id="wrap">
	<header>
	</header>
	<div class="test">
        <table class="table">
		    <thead>
			    <tr>
				    <th class="col-lg-1"> S.No </th>
			    	<th class="col-lg-4"> Item Name </th>
			    	<th class="col-lg-1"> Quantity </th>
				    <th class="col-lg-2"> Price </th>
				    <th class="col-lg-2"> Total </th>
				    <th class="col-lg-2"> Edit/Delete </th>
			    </tr>
		    </thead>
		    <tbody>
				    <tr>
				    	<td> 1. </td>
					    <td> </td>
					    <td> </td>
					    <td> </td>
					    <td> </td>
					    <td> <i class="glyphicon glyphicon-plus"> </i> <i class="glyphicon glyphicon-trash"> </i> </td>
				    </tr>
            </tbody>
	    </table>
    </div>
</div>
<footer>
	Total Amount:<span class="sum"> </span>
	Incoming Cash: <input type="text" placeholder="Cash"> <br>
	Refund: <span> </span>
    <input class="btn btn-default" type="submit" value="Submit" >
</footer>

CSS

html, body {
  height: 100%;
}
.test {
    height: calc(100% - 100px);
    border: 1px solid red;
}
#wrap {
	height: 100%;
	margin: 0 auto -60px;
	padding: 0 0 60px;
    background-color: yellow;
}
header {
	width: 100%;
	height: 100px;
	background: #abcdef;
}
thead tr th {
	text-align: center;
}
tbody {
	overflow: auto;
}
tbody td select {
	width: 100%;
}
tbody td {
	text-align: center;
	font-weight: bold;
}
.sp {
	display: none;
}
footer {
	height: 60px;
	background-color: #f5f5f5;
}