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

我试图模仿这一主题：模拟一个固定的侧边栏模板问题

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

但反而让博客文章永远留在右手边（固定侧边栏的外部空间）为中心，并有博客帖子的宽度为％。

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

这里是一个的jsfiddle从上面的基本条件重新创建主题：

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

我的全部之后是使灰内格永远保持红色内容DIV中居中。

柜面的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; 
}

感谢。

来源

2014-04-08 Lovelock

我不会建议像素和百分比的广泛混合。这将使响应更加困难。此外，如果您要让左侧边栏具有一定比例的宽度，可以定位您的内部div儿童游戏。 –

刚好有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/

来源

2014-04-08 10:30:34 Sylvain

谢谢，这给了我一个很好的起点:) – Lovelock

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

如果你设置body，html（和容器）为100％的高度，它将无法滚动。高度应该超过100％。

来源

2014-04-08 10:34:20 stetim94

公平点，但看到因为它不回答它作为一个评论属于它的问题。 –

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

回答

相关问题