CSS-上面高度自适应下面撑满剩余部分

最新推荐文章于 2023-10-13 09:39:00 发布

麦子的小库存

最新推荐文章于 2023-10-13 09:39:00 发布

阅读量1.6k

点赞数 1

分类专栏： JS小知识点

本文链接：https://blog.csdn.net/qq_36162529/article/details/103299682

版权

本文介绍了如何使用CSS让页面上部区域高度自适应，下部区域自动填充剩余屏幕空间，确保整个页面布局的合理性。通过实例代码和解释，详细解析了相关CSS技巧和方法。

摘要由CSDN通过智能技术生成

<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=