目录
介绍
样式
代码
介绍
- 1.设置上方
- 2.设置下方
- 3设置左边
- 4.设置右边
- 5.2的地方高采用计算得出
- 6.4右边才有计算得出宽度
- 在有需要的时候可以采用计算最小值，
- 也就是最小支持大小即可
样式
代码
<html>
<head>
<title>系统布局</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
body{
margin:0px;
padding:0px;
}
.s1{
position:relative;
width:100%;
height:60px;
line-height:60px;
background:#000;
color:rgb(218, 97, 97);
}
.s1 h3{margin-left:20px;}
.s2{
position:relative;
width:100%;
}
.s21{
position: absolute;
width:200px;
background:rgb(46, 41, 70);
height:100%;
float: left;
}
.s22{
background:rgb(201, 195, 195);
height:100%;
float: right;
}
</style>
<body>
<div class="s1">
<h3>logo</h3>
</div>
<!-- s2采用计算高度为下边俩个使用 自动加高 有需要可以设置最小情况-->
<div class="s2" id="s2">
<div class="s21"></div>
<!-- 技术宽度自适应 自动加宽 有需要可以设置最小情况-->
<div class="s22" id="s22"></div>
</div>
</body>
<script>
var glb = {
init:function(){
document.getElementById("s2").style.height=(window.innerHeight-60)+"px";
document.getElementById("s22").style.width=(window.innerWidth-200)+"px";
}
}
glb.init();
</script>
</html>
ok
持续更新
