CSS3-圣杯布局

开心很重要

已于 2022-06-02 14:38:00 修改

阅读量110

点赞数

文章标签： css css3 前端

于 2022-06-02 14:37:17 首次发布

本文链接：https://blog.csdn.net/Black_Straight/article/details/125100395

版权

CSS3 圣杯布局 flexbox 布局设计前端开发

关键词由CSDN通过智能技术生成

文章目录

一、CSS3、圣杯布局

一、CSS3、圣杯布局

*{margin: 0;padding: 0;}
			html{height: 100%;}
			body{
				height: 100%;
				display: flex;
				flex-direction: column;
			}
			header{
				height: 150px;
				background: orange;
			}
			section{
				background: yellow;
				flex: 1;
				display: flex;
			}
			section article{
				width: 250px;
				background: red;
			}
			section div{
				background: green;
				flex: 1;
			}
			section aside{
				width: 250px;
				background: blue;
			}
			footer{
				height: 150px;
				background: pink;
			}

<body>
		<header></header>
		<section>
			<article></article>
			<div></div>
			<aside></aside>
		</section>
		<footer></footer>
	</body>