html - CSS Sticky 页眉、页脚和侧边栏

Question

我有一个带有粘性页眉、粘性侧边栏和粘性页脚的网页，但无法在右侧填充内容(填充被忽略)并且我的页内链接无法正常工作。我想用 仅 CSS 来做到这一点。

http://jsfiddle.net/C7v9f/

我知道还有很多其他类似的问题，但他们的解决方案要么行不通；他们太老了；他们从未得到答复；他们使用 jQuery、JavaScript 等，或者在添加诸如行高或填充之类的东西后他们会分崩离析。

html, body {
    height: 100%;
    color: #fff;
}
body, p {
    margin: 0;
    padding: 0;
}    
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    overflow: auto;
    background: #888;
}    
#header {
    height: 55px;
    background: #222;
    position: fixed;
    width: 100%;
    z-index: 4;
}

#SC-wrap {
    float: left;
    margin-bottom: 40px;
}


/* BEGIN HEADER NAV */
#nav {    
    padding-left: 32%;        
}
 #nav li{
    position: relative;
    display: inline;
    color: white;
}
#nav a {
    display: inline-block;
    padding:10px;
}
#nav ul {
    position: absolute;
    /*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
    left:-9999px;
    margin:0;
    padding:0;
    text-align: left;
    text-decoration: none;    
}
#nav ul li {
    display: block;    
}
#nav li:hover ul {
    left:0;
}
#nav li:hover a {
    text-decoration: none;
    background: darkgrey;
}
#nav li:hover ul a {
    text-decoration: none;
    background: #B8B8B8;
}
#nav li:hover ul a:hover{
    text-decoration: none;
    background: #CCCCCC; 
}
#nav ul a{
    white-space: nowrap;
    display: block;
    border-bottom:1px solid #ccc;
    color: white;
    text-decoration: none;
}
#nav a {
    text-decoration:none;    
    color: blue;
}
#nav a:hover {
    text-decoration:none;
    background: #f1f1f1;
    color: blue;
}
/* END HEADER NAV */


#sidebar {
    background-color: green;
    width: 150px;
    height: 100%;    
    position: fixed; 
    line-height: 2em;
    font-size: 1.2em;
    z-index: 2;
    text-align: center;
    padding-top: 6%;
    overflow-y: auto;    
}
#sidebar a {
    text-decoration: none;  
}
#sidebar a:hover {
    background-color: grey;    
}    
#content {            
    padding-right: 250px;
    width: 100%;
    padding-top: 100px;    
    font-size: 1.2em;
    line-height: 1.6em;
    z-index: 1;
    text-align: left;
    padding-left: 200px;   
}    
#footer {
    position: fixed;
    bottom: 0px;
    height: 40px;
    width: 100%;
    background: #222;
    z-index: 4;
}

Answer 1

右边的填充是有的，内容太宽了。要使填充不包含在元素的宽度中，请使用 box-sizing:border-box Demo

#content {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    ... Your other styles ...
}