Javascript 模拟固定边栏模板问题

我试图模仿这个主题：

但是，要使博客文章始终保持在右侧的中心位置（固定边栏外的空间），并且博客文章的宽度为%

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

下面是一个JSFIDLE，从基本方面重新创建了上面的主题：

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

如果JSFIDLE发生故障，请参考：

HTML:

---

谢谢。

只有两个属性需要更改，以便按您想要的方式工作：

#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;
}

我已经在这里更新了JSFIDLE示例：

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

---

高度应大于100%

我不建议广泛混合像素和百分比。这将使后续响应变得更加困难。同样，如果你将你的左侧边栏设置为一个百分比宽度，这将使你的内部分区成为孩子们的游戏。公平点，但它并没有回答这个问题，它应该作为一个评论。

* {
  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;
}

#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;
}