<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>测试页</title>
	<style>
        /* 1. 强制重置所有默认样式，消除干扰 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 2. 保证根元素高度链完整（关键！） */
        html, body {
            height: 100vh; /* 视口高度 */
            overflow: hidden; /* 防止整体滚动 */
        }
		.main-body {
			font-size:14px;
			font-family: '微软雅黑',Tahoma, sans-serif, Helvetica;
			_font-family: Tahoma, sans-serif, Helvetica;
			display: flex; 
			flex-direction: column;
			height: 100vh; /* 继承 body 的 100% 高度 */	
			padding: 3px;		
		}
		.main-body .navi-bar {
			border: 1px solid #cccccc;
			height:24px;
			line-height: 24px;
		}
		.main-body .body-container {
			border: 1px solid red;
			flex: 1; /* 关键：占据剩余所有高度 */
			overflow: hidden;
            overflow-y: auto; /* 内容超出时，自身滚动（避免整体滚动） */
		}
	</style>
</head>
<body>
	<div class="main-body">
		<div class="navi-bar">导航栏</div>
		<div class="body-container">
			<?
			for($i = 0; $i < 100; $i++) {
				echo "内容区域{$i}<br>";
			}
			?>
		</div>
	</div>
</body>
</html>