calc（）CSS函数的HTML5 + CSS3向后兼容性

Question

Here's the fiddle: http://jsfiddle.net/F793U/1/ 这是小提琴： http : //jsfiddle.net/F793U/1/

I am creating a web application with 4 sections that take up 100% of the window real estate. 我正在创建一个包含4个部分的Web应用程序，这些部分占据了100％的窗口空间。 Two of the sections, side-bar and content, have their own scrollbars. 侧栏和内容这两个部分都有自己的滚动条。 The browser scrollbars should never be seen. 浏览器滚动条永远不可见。 To achieve this I have used the css calc() function. 为此，我使用了css calc（）函数。

My question is: Is there a simpler way to achieve this? 我的问题是：有没有更简单的方法来实现这一目标？ And, if not, how can I apply this to older browsers (such as IE 8 and before)? 而且，如果没有，我如何将其应用于较旧的浏览器（例如IE 8及更高版本）？

HTML: 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: 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;
}

Answer 1

If you want to solve this particular case, I would suggest that you (perhaps a bit ironically) try relying on the good old table layouts of yesteryear. 如果您想解决这种特殊情况，我建议您（也许有点讽刺意味）尝试依靠过去的良好旧表布局。 However, it does get a tad trickier if you want to do it properly without using <table> since display:table doesn't have an equivalent to the the colspan or rowspan attributes. 但是，如果不使用<table>来正确地进行操作，它的确会有点棘手，因为display:table不具有colspan或rowspan属性的等效项。

What this means is that you may need to use a few more containers than before, but still nothing really majorly complex. 这意味着您可能需要使用比以前更多的容器，但仍然没有什么真正复杂的东西。

I made a rather basic JSFiddle to show you what I mean. 我做了一个相当基本的JSFiddle ，向您展示了我的意思。

HTML 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 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;
}

calc（）CSS函数的HTML5 + CSS3向后兼容性

问题描述

1 个解决方案

解决方案1
2 已采纳 2013-12-03 00:54:20

calc（）CSS函数的HTML5 + CSS3向后兼容性

问题描述

1 个解决方案

解决方案1 2 已采纳 2013-12-03 00:54:20

解决方案1
2 已采纳 2013-12-03 00:54:20