有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

原创已于 2022-08-15 16:53:43 修改 · 497 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

于 2022-08-11 18:17:42 首次发布

本文介绍了一种利用HTML和CSS实现特殊网页布局的方法。通过绝对定位和相对定位结合的方式，实现了顶部固定高度区域与底部自适应高度区域的无缝衔接。此布局方案适用于需要固定头部而主体内容高度不定的页面设计。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<style>
		html,body{height: 100%;padding: 0;margin: 0;}
		 .auto { height: 100%; position: relative; }
		 .A { height: 100px; background: #BBE8F2; }
		 .b { background: #D9C666; width: 100%; position: absolute; top: 100px ; left: 0 ; bottom: 0; }
	</style>
	<body>
		
		<div class="auto">
		        <div class="A"></div>
		        <div class="b"></div>
		     </div>
	</body>
</html>

最终效果