帶可選側欄的流體內容div

我有一個問題，我沒有在我看過的各種CSS佈局模型中找到解決方案，所以我想我會在這裏發佈它。帶可選側欄的流體內容div

我正在使用基本流體/固定兩列布局的網站上工作。該網站的內容位於左側的div中，側邊欄位於右側。側欄具有200像素左右的固定寬度，並且內容擴展以填充父級的剩餘寬度。

下面的代碼是什麼樣子：

<div style="width: 90%; margin: 10px auto 10px auto;"> <!-- site container --> 
    <div style="margin-right: 200px;">Content goes here.</div> 
    <div style="float: right; width: 200px;">Menus goes here.</div> 
    <div style="clear: both;"></div> <!-- float-clearer div --> 
</div>

這是一個非常標準的方法，並在大多數情況下工作正常，但問題是，該網站的設計要求側邊欄只出現在特定的案例。所有的HTML都是通過PHP生成的，「get-content（）」函數並不知道「get-sidebar（）」是否會被調用。

當側欄被調用時，我希望內容擴展到填充父div，同時爲側欄留下足夠的空間。如果沒有側邊欄，內容應該展開以填充父項的整個寬度。

有沒有什麼辦法可以用CSS來做到這一點 - 也許在不依賴PHP/JavaScript的情況下使用「auto」作爲內容邊距？

來源

2009-09-27 Radek

JavaScript/jQuery可以輕鬆地幫助你..如果你不介意使用它。 – Aziz 2009-09-27 17:03:44

僅供參考，您發佈的原始代碼實際上將菜單置於下方，但位於內容區域的右側。出於這個原因，菜單div是否存在並不重要。 – jakeisonline 2009-09-27 17:17:37

您可以刪除非語義「清除」div並將該頁面包裝在非語義表中。表格完美地處理了這種情況。 :) – 2009-09-27 17:19:18

你可能會考慮做這樣的：

<div style="width: 90%; margin: 10px auto 10px auto;"> <!-- site container --> 
    <div style="background-color:#CCC;height:100%;"> 
     <div style="background-color:#444;float: right; width: 200px;height:100%;">Menus goes here.</div> 
     Content goes here. 
    </div> 
    <div style="clear: both;"></div> <!-- float-clearer div --> 
</div>

通過這樣做這樣的說法，菜單坐鎮內線主要的div並沒有保證金的權利，所以當菜單消失，文字擴張以填補空間。

「身高：100％」確保菜單和內容框拉伸到相同的高度。如果需要，您還可以將其設置爲像素或時間量或百分比小於100。

來源

2009-10-02 17:47:07 JoshMock

不知道這是否適用於更復雜的佈局 - 內容將包含自己的浮動div和其他元素 - 但在基本級別上，這是一個很好的解決方案。 – Radek 2009-10-09 05:45:21

相反浮動工具條，試試這個：

#sidebar { 
    display: inline-block; 
    display: -moz-inline-box; 
    -moz-box-orient: vertical; 
    vertical-align: top; 
    zoom: 1; 
    *display: inline; 
}

來源

2009-09-27 17:26:02 3zzy

是否可以添加一個類使用PHP的身體嗎？根據上下文的不同，可能會顯示「one-col」或「two-col」。然後，當有側邊欄時，您可以給內容div一個保證金，但是當沒有時，您可以給內容div一個保證金。

來源

2009-09-28 15:27:57 skybondsor

帶可選側欄的流體內容div

回答

相關問題