Html
    Css
    Js

    
                        
html,body {
	height:100%;
	padding:0px;
	margin:0px;
}
body * {
	padding:20px;
	box-sizing:border-box;
}
.head {
	height:60px;
	background-color:aqua;
	position:absolute;
	width:100%;
}
.atc {
	background-color:burlywood;
	overflow:auto;
	width:100%;
	position:absolute;
	bottom:100px;
	top:60px;
	overflow:auto;
}
.left-nav {
	background-color:chocolate;
	float:left;
	width:200px;
	height:100%;
	overflow:auto;
	margin-right:20px;
}
.sec {
	background-color:darkseagreen;
	overflow:auto;
	/* float:left;
	*/
            /* position:absolute;
	left:240px;
	right:140px;
	*/
            height:100%;
	/* overflow:auto;
	*/
}
.right-sec {
	background-color:springgreen;
	float:right;
	width:100px;
	height:100%;
	/* overflow:auto;
	*/
}
.fot {
	background-color:black;
	color:white;
	height:100px;
	position:absolute;
	width:100px;
	bottom:0;
	width:100%;
}
.content-head {
	position:sticky;
	top:0px;
}
.sec-content {
	width:100%;
	overflow:auto;
}
.sec-aside {
	float:right;
	width:100px;
	background-color:mistyrose;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

浮动定位实现圣杯布局

更新时间:2024-02-20 20:25:33

0