君子以厚德载物
有朋自远方来,不宜乐乎。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#header{
position:absolute;
background-color: #000000;
color:white;
top: 0px;
left: 0px;
right: 0px;
height: 50px;
}
#data{
position:absolute;
margin-top: 50px;
margin-bottom: 50px;
top: 0px;
bottom: 0px;
left:0px;
width: 100%;
}
#category{
height: 100%;
background-color: #ffff00;
float: left;
width: 100px;
padding: 5px;
overflow:hidden;
}
#category_sub{
width: 120px;
height: 100%;
overflow-x:hidden;
overflow-y: auto;
padding:0 10% 0 0;
}
#content{
background-color: red;
margin-left: 105px;
height: 100%;
}
#footer{
background-color: #000000;
height: 50px;
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="data">
<div id="category">
<div id="category_sub">
<p>cate111111111111111111111111111111111</p>
<p>cate2</p>
<p>cate111111111111111111111111111111111</p>
<p>cate2</p>
<p>cate111111111111111111111111111111111</p>
<p>cate2</p>
<p>cate111111111111111111111111111111111</p>
<p>cate2</p>
<p>cate111111111111111111111111111111111</p>
<p>cate2</p>
<p>cate111111111111111111111111111111111</p>
<p>cate2</p>
<p>cate111111111111111111111111111111111</p>
<p>cate2</p>
<p>cate111111111111111111111111111111111</p>
<p>cate2</p>
<p>cate111111111111111111111111111111111</p>
<p>cate2</p>
<p>cate111111111111111111111111111111111</p>
<p>cate2</p>
<p>cate111111111111111111111111111111111</p>
<p>cate2</p>
</div>
</div>
<div id="content">work</div>
</div>
<div id="footer"></div>
</body>
</html>
posted on 2016-10-19 20:05  snowcolin  阅读(370)  评论(0编辑  收藏  举报

期待你的评论交流