使用html5，css，实现品字形布局

最新推荐文章于 2021-07-21 22:11:54 发布

dream_hai

最新推荐文章于 2021-07-21 22:11:54 发布

阅读量5.7k

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/dream_hai/article/details/52022257

版权

html,body{
	margin:0;
	padding:0;
}

div:first-child{
	
	width:100%;
	height:100%;
	background:red;
}

如果这样写的话div的height:100%;是无效的，需要在html,body中加入 height：100%:或者div:first-child中加入position:absolute;div中的height:100%;才有效

如果不在前面声明<!DOCTYPE html>的话两个都不写也行

实现品字形布局代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>品字形布局</title>
</head>
<style>
html,body{
	margin:0;
	padding:0;
	height:100%;
}
div:first-child{
	/*position:absolute; 	两者二选一，*/
	width:100%;
	height:calc(100% - 200px);
	background:red;
}
div:nth-child(2){
	position:fixed;
	width:50%;
	height:200px;
	background:green;
	bottom:0;
	left:0;
}
div:nth-child(3){
	position:fixed;
	width:50%;
	height:200px;
	background:yellow;
	bottom:0;
	right:0;
}
</style>
<body>
<div></div>
<div><

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dream_hai

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用html5，css，实现品字形布局

使用HTML，CSS3实现品字形布局html,body{ margin:0; padding:0;}div:first-child{ width:100%; height:100%; background:red;}如果这样写的话div的height:100%;是无效的，需要在html,body中加入 height：100%:或者div:first-child中加入pos
复制链接

扫一扫