動態CSS佈局

Question

我只是想知道是否有一種技術來設計一個網站，使我的內容區域動態調整它的寬度？

這種情況是我有2個側邊欄和1箇中央內容區域。如果其中一個側邊欄丟失了，我希望內容區域能夠佔用補充側邊欄留下的額外空間。 如果缺少兩個側邊欄，我希望內容區域完全展開。

我知道％s可能是一個潛在的解決方案，但我不知道如何設置上面描述的動態擴展/收縮功能。

Answer 1

我認爲960 grid system是你的答案。看看它。

Answer 2

也許您在尋找類似於Adaptive CSS-Layouts的產品。

Answer 3

只有唯一的CSS-解決方案，我能想到的，做以下假設：

1. 您的用戶使用了最新的瀏覽器，支持相鄰兄弟選擇。
2. 您的右列出現之前的主要內容列。

的方法中，下面所示，採用純的CSS的工作原理，但是它也使用jQuery來實現右列的去除（從DOM）和娛樂（在DOM）：jQuery的不影響/影響任何內容的樣式或尺寸（儘管它也會切換鏈接中用於刪除/重新創建列的文本）。

這就是說，示範HTML標記低於：

<div id="contentWrap"> 
    <div id="sidebar"> 
     <!-- navigation --> 
    </div> 
    <div id="rightColumnAndMainContent"> 
     <div id="rightColumn"> 
      <h2>References</h2> 
      <!-- a list of links --> 
     </div> 
     <div id="mainContent"> 
      <p><!-- Lorem ipsum text in the demo... --></p> 
     </div> 
    </div> 
    <div id="footer"> 
     <p><a href="#" class="remove">Remove the footer</a></p> 
</div> 

而CSS：

#contentWrap { 
    width: 900px; 
} 

#sidebar { 
    float: left; 
    width: 110px; 
} 

#rightColumnAndMainContent { 
    position: relative; 
    margin-left: 120px; 
} 

#rightColumn { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #f00; 
    width: 140px; 
} 

#mainContent { 
    background-color: #ffa; 
    margin-right: 0; 
} 

#rightColumn + #mainContent { 
    margin-right: 150px; 
} 

#footer { 
    text-align: center; 
    clear: both; 
    border-top: 6px solid rgba(0,0,0,0.6); 
} 

這個工程作爲相鄰兄弟選擇（#rightColumn + #mainContent比基本id更具體 - 選擇器（#mainContent），這意味着雖然#mainContent具有已定義的margin-right: 0;，但它被推翻如果#mainContent緊跟在#rightColumn之後，只有在#rightColumn出現在加價中時才能做到這一點。

這感覺很糟糕，但它確實有效（至少在JS Fiddle demo的範圍內）。

---

參考文獻：

• adjacent-sibling + CSS selector。
• Adjacent-sibling selector cross-browser support。

Answer 4

display: table-cell可以很容易地做到這一點。瀏覽器支持：http://caniuse.com/css-table

參見：http://jsfiddle.net/3FW6w/

<div class="container"> 
    <div class="leftSidebar">left</div> 
    <div class="content">content</div> 
    <div class="rightSidebar">right</div> 
</div> 

.container { 
    border: 2px solid #f0f; 
    width: 400px; 
    margin: 0 auto; 
    display: table 
} 
.container > div { 
    border: 2px dashed #444; 
    display: table-cell 
} 
.leftSidebar, .rightSidebar { 
    width: 80px 
}