Question

我试图模仿这个主题：

http://themetrust.com/demos/ink/?project=the-city-of-samba

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

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

这是一个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

只需更改2个属性即可按照您的需要进行更改：

#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％。

模拟固定的侧边栏模板问题

2 个答案: