模拟已修复的侧边栏模板问题

Question

am试图模仿这个主题：

http://themetrust.com/demos/ink/?project=the-桑巴市

但相反，让博客文章始终保持在右手边的中心（固定侧边栏外的空间），并使博客文章的宽度为%。

我目前在我的网站上设置了这个，但我使用了一个基于百分比的侧边栏，看起来很糟糕。

这是一个JSfiddle从上面的基本术语中重新创建主题：

http://jsfiddle.net/Uyv6w/4/

我所追求的只是让灰色的内部div始终保持在红色内容div的中心。

Incase JSFiddle倒下，未来参考：

HTML:

<div id="container">
    <div id="sidebar"></div>
    <div id="content">
        <div id="inner"></div>
    </div
</div>

CSS：

* {
  margin: 0; padding: 0;
}
html, body {
  width: 100%;
  height: 100%;
  background-color: #333;
}
#container {
  height: 100%;
  width: 100%;
}
#sidebar {
  height: 100%;
  width: 100px;
  background-color: #9b59b6;
  position: fixed;
}
#content {
  width: 100%;
  background-color: #f00;
}
#inner {
  width: 60%;
  margin-left: 150px;
  background-color: #888;
  height: 1000px;
}

谢谢。

Answer 1

只有两个属性需要更改才能按您想要的方式工作：

#content {
    /* width: 100%; */
    margin-left: 100px; /* the width of you sidebar.
                            Since #content is a div, a block-level element
                            , its width will be automatically 100%
                            , minus the margins */
    background-color: #f00;
}
#inner {
    width: 60%;
    /* margin-left: 150px; */
    margin-left: auto;
    margin-right: auto; /* having margin-left & right set to auto will center your div.
                            you could also use "margin: 0 auto" */
    background-color: #888;
    height: 1000px;
}

我在这里向您更新了JSFiddle示例：http://jsfiddle.net/Uyv6w/5/

Answer 2

http://jsbin.com/requv/1/edit

如果您将body、html（和容器）设置为100%高度，它将无法滚动。高度应该大于100%。