[英]HTML5 + CSS3 Backwards compatibility on calc() css function
這是小提琴: http : //jsfiddle.net/F793U/1/
我正在創建一個包含4個部分的Web應用程序,這些部分占據了100%的窗口空間。 側欄和內容這兩個部分都有自己的滾動條。 瀏覽器滾動條永遠不可見。 為此,我使用了css calc()函數。
我的問題是:有沒有更簡單的方法來實現這一目標? 而且,如果沒有,我如何將其應用於較舊的瀏覽器(例如IE 8及更高版本)?
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="header-wrap">
<div class="header">
<div class="logo"><h4>Header</h4></div>
</div>
</div>
<div class="content-wrap">
<div class="side-bar">
Sidebar
</div>
<div class="content-top">
<div class="top">Content-Top</div>
</div>
<div class="content">
<br />
<div style="width: 95%; margin: 0 auto;">
Content
</div>
</div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
background: #d4d4d4;
font-family: "helvetica neue", Tahoma, Sans;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background-color: #cecece;
border-left: 1px solid #ccc;
}
::-webkit-scrollbar-thumb {
background-color: #c0c0c0;
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #aaa;
}
.header-wrap {
width: 100%;
height: 30px;
}
.header {
width: 100%;
height: 29px;
background: #c0c0c0;
background: -webkit-linear-gradient(bottom, #cacaca,#eaeaea); /* For Safari */
background: -o-linear-gradient(bottom, #cacaca, #eaeaea); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom, #cacaca, #eaeaea); /* For Firefox 3.6 to 15 */
background: linear-gradient(bottom, #cacaca, #eaeaea); /* Standard syntax */
border-bottom: 1px solid #a0a0a0;
top: 0;
}
.content-wrap {
top: 0;
bottom: 0;
right: 0;
left: 0;
height: 100%;
width: 100%;
min-width: 800px;
height: -moz-calc(100% - 31px);
height: -webkit-calc(100% - 31px);
height: calc(100% - 31px);
}
.side-bar {
overflow-y: scroll;
width: 280px;
min-width: 280px;
border-right: 1px solid #a0a0a0;
height: 100%;
padding: 0 10px;
float: left;
}
.content-top {
margin-left: 300px;
margin-right: 0;
}
.top {
width: 100%;
height: 98px;
border-bottom: 2px groove #fff;
}
.content {
overflow-y: scroll;
height: 100%;
height: -moz-calc(100% - 100px);
height: -webkit-calc(100% - 100px);
height: calc(100% - 100px);
margin-top: 0;
margin-left: 300px;
margin-right: 0;
margin-bottom: 0;
}
如果您想解決這種特殊情況,我建議您(也許有點諷刺意味)嘗試依靠過去的良好舊表布局。 但是,如果不使用<table>
來正確地進行操作,它的確會有點棘手,因為display:table
不具有colspan
或rowspan
屬性的等效項。
這意味着您可能需要使用比以前更多的容器,但仍然沒有什么真正復雜的東西。
我做了一個相當基本的JSFiddle ,向您展示了我的意思。
HTML
<div class="outer">
<div class="header">Header</div>
<div class="contentRow">
<div class="contentTable">
<div class="leftCol">Sidebar</div>
<div class="rightCol">
<div class="rightTable">
<div class="topContent">Top content</div>
<div class="content">Content</div>
</div>
</div>
</div>
</div>
</div>
CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.outer {
display: table;
height: 100%;
width: 100%;
}
.header {
background: blue;
display: table-row;
height: 30px;
}
.contentRow {
display: table-row;
}
.contentTable {
display: table;
width: 100%;
height: 100%;
}
.leftCol {
background: red;
display: table-cell;
width: 280px;
min-width: 280px;
height: 100%;
}
.rightCol {
display: table-cell;
height: 100%;
}
.rightTable {
display: table;
width: 100%;
height: 100%;
}
.topContent {
background: green;
display: table-row;
height: 100px;
}
.content {
background: orange;
display: table-row;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.