<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>两栏布局</title>
<style>
*{margin:0;padding:0;}
/*****************************************方法一 固定高度**************************************/
/*.left {float:left;width:200px;background-color:#ff0;height:500px;}
.right {background-color:#f00;height:500px;margin-left:210px;}*/
/*****************************************方法二 高度占满父元素**************************************/
.left{position:absolute;top:0;left:0;bottom:0;width:200px;background-color:#ff0;height:100%;}
.right{position:absolute;top:0;bottom:0;left:210px;right:0;background-color:#f00;height:100%;}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
两栏布局
最新推荐文章于 2024-07-24 01:23:16 发布