Question

我正在尝试创建一个流畅的布局网站，该网站还有一个左侧边栏，其中包含以下属性：

当主要内容
它占据了页面的整个高度

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

您可以执行以下操作：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>

Answer 2

<强> 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%;
}

固定宽度绝对侧边栏，带有流体含量

2 个答案: