html - 具有可变内容的固定宽度绝对侧边栏

Question

我正在尝试创建一个流体布局网站，该网站也有一个具有以下属性的左侧边栏:

1. 当主要内容滚动时它不滚动
2. 它占据了整个页面的高度

我见过的唯一布局是这个:http://stugreenham.com/demos/fluid-width-with-a-fixed-sidebar/

HTML

<div id="page"> 
    <header id="sidebar"> 
        //SIDEBAR CONTENT HERE
    </header> 

    <article id="contentWrapper"> 
        <section id="content"> 
            //CONTENT HERE
        </section> 
    </article> 
</div>

CSS

html {
    overflow: hidden;
}

#sidebar { 
    background: #eee;
    float: left;
    left: 300px;
    margin-left: -300px;
    position: relative;
    width: 300px;
    overflow-y: auto;
}

#contentWrapper { 
    float: left;
    width: 100%;
}

#content {
    background: #ccc;
    margin-left: 300px;
    overflow-y: auto;
}

但是我认为这是一个糟糕的解决方案，因为它不仅需要负边距，而且还需要 javascript。

有没有更好的方法来实现这一点？

Answer 1

Demo

CSS

#sidebar {
    position:fixed;
    height:100%;
    width: 300px;
    background-color: #ccc;
    overflow-y: auto;                   
}
#contentWrapper { /* not using margin */
    box-sizing:border-box;
    background-color:#eee;
    position:absolute;
    left:300px;
    width:calc(100% - 300px);
    min-height: 100%;
}
#contentWrapper { /* using margin */
    box-sizing:border-box;
    background-color:#eee;
    margin-left: 300px;
    /*position:absolute;
    left:300px;
    width:calc(100% - 300px);*/
    min-height: 100%;
}



html,body,#page {
    width: 100%;
    height: 100%;
}