一個簡單的百分百後臺模板框架 兼容ie8
截圖html
使用table-layout實現 左欄任意大小 右欄保持填充 右欄內部高度也可自動適應web
代碼code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin:0;
padding:0;
}
html {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
overflow:hidden;
}
html, body {
height: 100%;
}
.container {
width: 100%;
height: 100%;
display: table;
border-collapse: collapse;
background-color: #ccc;
}
.row {
display: table-row;
}
.col {
display: table-cell;
vertical-align: top;
}
.block {
width: 300px;
/*height: 1700px;*/
background: #129982;
}
.wf {
width: 100%;
}
.table {
width: 100%;
height: 100%;
display: table;
border-collapse: collapse;
}
.scroll {
width: 100%;
position: relative;
left: 0;
top: 0;
overflow: scroll;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
.pl {
height: 1200px;
}
.hf {
height: 100%;
}
.bn {
height: 40px;
}
/*.hf > * {*/
/*height: 100%;*/
/*}*/
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="scroll hf">
<div class="block">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
123132
</div>
</div>
</div>
<div class="col wf">
<div class="scroll hf">
<div class="container">
<div class="row">
<div class="col">
<div class="scroll">
<div class="bn">1</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="scroll">
2
</div>
</div>
</div>
<div class="row hf">
<div class="col">
<div class="scroll hf">
3
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
相關文章
- 1. IE8兼容
- 2. 【兼容】兼容IE8瀏覽器
- 3. 兼容ie8
- 4. 關於 highchart 兼容IE8 container不能用百分比
- 5. ie8的兼容
- 6. IE8兼容placeholder
- 7. 簡潔AngularJS框架後臺管理系統bootstrap後臺模板
- 8. Jquery IE8兼容性
- 9. bootstrap3 兼容IE8瀏覽器
- 10. IE8兼容大全
- 更多相關文章...
- • Eclipse 代碼模板 - Eclipse 教程
- • Maven 項目模板 - Maven教程
- • 委託模式
- • Docker容器實戰(七) - 容器眼光下的文件系統
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. IE8兼容
- 2. 【兼容】兼容IE8瀏覽器
- 3. 兼容ie8
- 4. 關於 highchart 兼容IE8 container不能用百分比
- 5. ie8的兼容
- 6. IE8兼容placeholder
- 7. 簡潔AngularJS框架後臺管理系統bootstrap後臺模板
- 8. Jquery IE8兼容性
- 9. bootstrap3 兼容IE8瀏覽器
- 10. IE8兼容大全