兩列固定流體固定的css佈局

我想創建一個佈局，其中有一個固定的寬度和固定位置側邊欄在左邊。兩列固定流體固定的css佈局

問題在於設置主要內容區域的寬度 - 它從屏幕向右伸展。下面是我得到了什麼：

<body> 
    <div class="left-sidebar"> 
     sidebar 
    </div> 
    <div class="main-content"> 
     main 
    </div> 
</body>

CSS：

body { 
    position: relative; 
} 

.left-sidebar { 
    position: fixed; 
top: 0; 
left: 0; 
width: 220px; 
} 

.main-content { 
position: absolute; 
top: 0; 
left: 220px; 
background: #f0f0f0; 
width: 100%; 
}

我怎麼能在220px從左邊的主要內容DIV的開始，但只有填滿窗口寬度是多少？

來源

2012-12-21 babbaggeii

嘗試將主要內容設置爲完全左側顯示，但爲其留出側邊欄空餘空間。

.main-content { 
    position: absolute; 
    top: 0; 
    left: 0px; 
    margin-left: 220px; 
    background: #f0f0f0; 
    width: 100%; 
}

編輯：
我有一點時間，現在嘗試的代碼。我建議保留餘量而不是填充餘量，因爲它更適合你想要做的事情。使用保證金可讓您選擇在內容周圍放置邊框。另外，如果你確實想在內容中填充，你可以將其設置爲正常。如果您使用填充縮進邊欄，則必須將220px添加到所需的任何實際填充中。

這是我想出來的，它使用邊距而不是填充。

body { 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

.left-sidebar { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 220px; 
    border: 1px solid green; 
} 

.main-content 
{ 
    position: fixed; 
    top: 0; 
    left: 0px; 
    right: 0px; 
    margin-left: 220px; 
    background: #f0f0f0; 
    border: 1px solid red; 
}

我也同意anser參考動態驅動器。最初學習CSS的最佳方式之一是使用工作樣式表並根據需要對其進行自定義。最大的好處是它已經是跨瀏覽器兼容的。只需使用Google即可獲得一點靈感。

來源

2012-12-21 16:46:32

如果失敗，請嘗試使用「padding：220px」。 –

謝謝，填充左：220px的工作。我只是不得不調整z-index，以便左側欄位於頂部。 – babbaggeii

兩列固定流體固定的css佈局

回答

相關問題