一个简单布局的实现：header/aside/main/footer

最新推荐文章于 2025-01-08 20:00:00 发布

原创最新推荐文章于 2025-01-08 20:00:00 发布 · 2.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#布局

布局专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用绝对定位实现自适应网页布局的方法，通过设定父元素和子元素的特定属性，使得布局能够根据屏幕大小自动调整。同时，文章强调了语义化的重要性，并对main和top元素间的距离进行了优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：

<!--
    对自适应的思考：
    1.以一个全额展开的div作为布局的容器
    2.子元素以position:absolute；布局流进行
	3.对需要自适应的属性不进行设置（原理：所谓自适应就是父元素某特定属性由子元素来决定）
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一般布局</title>
		<style>
		    html,body,.parent{
				/*不能有缝隙*/
				margin:0;
				/*将页面进行撑开*/
				height:100%;
				/*隐藏溢出元素*/
				overflow:hidden;
			}
			.top{
				position:absolute;
				/*上边距和上内边距之和零*/
				top:0;
				left:0;
				right:0;
				height;100px;
				background:blue;               
			}
			.left{
			    position:absolute;
			    left:0;
				top:20px;
				bottom:50px;
				width:200px;
				background:red;
			}
			.right{
				position:absolute;
				left:200px;
				top:20px;
				bottom:50px;
				right:0;
				background:pink;
				/*对溢出元素，可以以滚动条方式显示*/
				overflow:auto;
			}
			.right .inner{
				min-height:1000px;
			}
			.bottom{
				position:absolute;
				left:0;
				right:0;
				bottom:0;
				height:50px;
				background:green;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			 <header class="top">top</header>
			 <aside class="left">left</aside>
			 <main class="right">
				   <div class="inner">right</div>
			 </main>
			 <footer class="bottom">bottom</footer>
		</div>
	</body>
</html>

做出的改进：

1.语义化

2.main和top之间的距离优化

参考文章

http://web.jobbole.com/94168/