css响应式设计表高度没有考虑在内

Question

我有一个双列响应式布局，左侧列的底部有一个HTML表格。在某个宽度@media screen and (max-width: 480px)处，右列重新定位在左侧列之下。然后看起来表格高度没有正确计算，并且表格与第二（右）列的顶部之间存在重叠。有没有办法在CSS中解决这个问题？我遇到的其他一些小问题是将图像垂直居中，将表格水平放置在父容器中，而不使用flexbox技术

html, body {
	height: 100%;
	margin: 0px;
}
img {
	max-width: 100%;
	max-height: 100%;
	border: 1px dashed crimson;
}
#wm-container {
	height: 95%;
	background-color: black;
	padding: 0.5%;
}
#wm-inf {
	background-color: lavender;
	margin: 0.5%;
	padding: 0.5%;
}
#wm-left {
	float: left;
	width: 49%;
	height: 90%;
	background-color: Silver;
	padding: 0.5%;
}
#wm-right {
	float: right;
	width: 48%;
	height: 90%;
	background-color: Silver;
	padding: 0.5%;
}
#wm-main {
	text-align: center;
	height: 65%;
	background-color: lavender;
	border: 1px dotted black;
	padding: 0.5%;
}
#wm-score-tbl {
	text-align: center;
	height: 30%;
	background-color: lavender;
	border: 1px dotted black;
	padding: 0.5%;
}
#wm-a4c {
	text-align: center;
	height: 55%;
	width: 57%;
	padding-left: 0.5%;
	float: left;
	border: 1px dotted black;
	background-color: lavender;
	padding: 0.5%;
}
#wm-a2c {
	text-align: center;
	height: 55%;
	width: 38%;
	padding-left: 0.5%;
	float: left;
	border: 1px dotted black;
	background-color: lavender;
	padding: 0.5%;
}
#wm-a3c {
	text-align: center;
	position: relative;
	float: left;
	height: 40%;
	width: 97%;
	padding-left: 0.5%;
	border: 1px dashed black;
	background-color: rgba(230,230,250,0.5);
	padding: 0.5%;
}

@media screen and (max-width: 480px) {
#wm-left, #wm-right {
	float: none;
	width: auto;
	margin-bottom: 1%;
}
}

<div id="wm-container"> 
	<div id="wm-inf">wm-inf</div>
	<div id="wm-left">
		<div id="wm-main"><img src="http://lorempixel.com/480/480/"></div>
		<div id="wm-score-tbl">
			<table border="1px solid #dddddd">
				<tr>
					<th>Entry Header 1</th>
					<th>Entry Header 2</th>
					<th>Entry Header 3</th>
					<th>Entry Header 4</th>
				</tr>
				<tr>
					<td>Entry First Line 1</td>
					<td>Entry First Line 2</td>
					<td>Entry First Line 3</td>
					<td>Entry First Line 4</td>
				</tr>
				<tr>
					<td>Entry Line 1</td>
					<td>Entry Line 2</td>
					<td>Entry Line 3</td>
					<td>Entry Line 4</td>
				</tr>
				<tr>
					<td>Entry Line 1</td>
					<td>Entry Line 2</td>
					<td>Entry Line 3</td>
					<td>Entry Line 4</td>
				</tr>
				<tr>
					<td>Entry Line 1</td>
					<td>Entry Line 2</td>
					<td>Entry Line 3</td>
					<td>Entry Line 4</td>
				</tr>
				<tr>
					<td>Entry Line 1</td>
					<td>Entry Line 2</td>
					<td>Entry Line 3</td>
					<td>Entry Line 4</td>
				</tr>
				<tr>
					<td>Entry Last Line 1</td>
					<td>Entry Last Line 2</td>
					<td>Entry Last Line 3</td>
					<td>Entry Last Line 4</td>
				</tr>
			</table>
		</div>
	</div>
	<div id="wm-right">
		<div id="wm-a3c"><img src="http://lorempixel.com/640/480/"></div>
		<div id="wm-a4c"><img src="http://lorempixel.com/480/640/"></div>
		<div id="wm-a2c"><img src="http://lorempixel.com/320/640/"></div>
	</div>
</div>