模擬一個固定的側邊欄模板問題

我試圖模仿這一主題：模擬一個固定的側邊欄模板問題

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

公平點，但看到因爲它不回答它作爲一個評論屬於它的問題。 –

模擬一個固定的側邊欄模板問題

回答

相關問題