CSS- Highly adaptive above and full of the rest underneath

<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			body {
				width: 500px;
				height: 500px;
				padding: 0;
				margin: 0;
			}
			.box {
				height: 100%;
				width: 100%;
				display: flex;
				flex-direction: column;
			}
			.header {
				width: 100%;
				padding: 9px 10px 10px;
				border-bottom: 1px solid #E9E9E9;
				flex-shrink: 0;
				background: #0AB9A4;
			}
			.content {
				width: 100%;
				flex-grow: 1;
				overflow-y: scroll;
				background: #6a67ce;
			}
			.info {
				width: 90%;
				border: 5px solid #9B9EA0;
				height: 1000px;
				background: #1890FF;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="header">
				中国青年报客户端北京11月28日电(中国青年报·中国青年网记者 邱晨辉)终于,天文学家发现了迄今为止质量最大的恒星级黑洞。施郭守敬望远镜(LAMOST)发现的黑洞,有70个太阳那么重,远超理论预言的质量上限,颠覆了人们对恒星级黑洞形成的认知。
			</div>
			<div class="content">
				<div class="info"></div>
			</div>
		</div>
	</body>
</html>

 

Published 35 original articles · won praise 1 · views 6718

Guess you like

Origin blog.csdn.net/qq_36162529/article/details/103299682