HTML_后台框架全屏界面_fixed形式布局
浏览数：22 /
时间：2015年06月09日
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body {
width:100%;
height:100%;
padding: 0;
margin: 0;
background-color: #f3f3f3;
font-family: "Hiragino Sans GB",\5FAE\8F6F\96C5\9ED1,Tohoma;;
}
.top{
position: fixed;
height: 80px;
width: 100%;
background-color: red;
}
.mid{
position: fixed;
margin-top: 80px;
height: 100%;
width: 100%;
background-color: blue;
min-width: 960px;
}
.left{
float: left;
height: 100%;
width: 220px;
background-color: green;
overflow-y:auto;
direction: rtl;
unicode-bidi: embed;
text-align: left;
}
.right{
margin-left: 220px;
height: 100%;
background-color: orange;
overflow-y:auto;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="mid">
<div class="left">
<p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p>
</div>
<div class="right">
<p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p>
</div>
</div>
</body>
</html>郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
