CSS 利用position来确定位置布局
程序员文章站
2022-04-25 11:37:51
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#header{
position: fixed;
top:0;
bottom: 80%;
left:20%;
right: 0;
background: gray;
margin-bottom: 2px;
}
#sidebar{
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 80%;
background: silver;
margin-right: 2px;
}
#main{
position: absolute;
top:20%;
bottom: 0;
left: 20%;
right: 0;
background: white;
overflow:scroll;
}
#footer{
position: fixed;
bottom: 0;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="web_content">
<div id="header">This is header</div>
<div id="sidebar">This is sidebar</div>
<div id="main">This is main</div>
<div id="footer">this is a footer</div>
</div>
</body>
</html>