具有流动内容的固定宽度绝对侧边栏答案

【问题标题】：Fixed width absolute sidebar with fluid content具有流动内容的固定宽度绝对侧边栏
【发布时间】：2014-09-05 11:33:40
【问题描述】：

我正在尝试创建一个具有以下属性的左侧边栏的流畅布局网站：

主要内容滚动时不滚动
占据整个页面高度

我见过的唯一布局是这个：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。

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

【问题讨论】：

不，我在没有 JS 之前做过这个，他们不是任何解决方案。

标签： html css

【解决方案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%;
}

【讨论】：

对于contentWrapper，是否需要position:absolute和left: 300px？同样可以通过静态定位和 300px 的左边距实现
是的，如果你想使用保证金，你可以这样做，我认为 OP 可能需要没有保证金的解决方案。无论如何我都会更新它。

【解决方案2】：

你可以这样做：http://jsfiddle.net/9U2U4/ 大量文字演示：http://jsfiddle.net/9U2U4/1/

CSS：

html, body {
   height: 100%;
}
body {
    margin:0;
    padding:0;
}
#page {
    height: 100%;
}
#sidebar {
    position: fixed;
    left:0;
    top:0;
    bottom:0;
    width: 30%;
    background-color: #eee;
}
#contentWrapper {
    margin-left: 30%;
    min-height: 100%;
    position: relative;
    background: #ccc;
}

#content
{
    padding: 10px;
}

HTML：

<div id="page">
    <header id="sidebar">// Sidebar</header>
    <article id="contentWrapper">
        <section id="content">
            <p>Text</p>
        </section>
    </article>
</div>

【讨论】：