<style>
		#header, #content, #footer {
			width: 90%;
			border: 1px solid gray;
			padding: 10px;
			margin: 0 auto 10px auto;
			min-height: 50px;
			position: relative;
			overflow: auto;
		}
		
		#subnav {
			border: 1px solid gray;
			width: 25%;
			position: absolute;
			top: 0;
			left: 0;
		}
		
		#main {
			border: 1px solid gray;
			width: 70%;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
		}
		
		#header button{
			width: 100px;
			height: 30px;
			text-align: center;
			font-size: 14pt
		}
	</style>

<div id='header'>
	<button>第 10 課</button>
	<button>第 9 課</button>
	<button>第 8 課</button>
	<button>第 7 課</button>
</div>

<div id='content'>
	<div id='subnav'>
		這是子導覽列
		<p style="height: 300px; border: 1px solid blue">...</p>
	</div>
	<div id='main'></div>
</div>

<div id='footer'>這是頁底標示</div>