沒有CSS表達式的可移除側欄佈局？

我有一個只有一些頁面而不是其他頁面的側欄的佈局。當側邊欄不存在#main應填充容器的可用寬度。沒有CSS表達式的可移除側欄佈局？

它的工作原理，但使用CSS表達式 - 是否有可能達到沒有這種表達式相同的佈局？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> 
<style type="text/css"> 
/* reset css */ 

* { 
    border: 0px none; 
    margin: 0; 
    padding: 0; 
    vertical-align: baseline; 
    font-family: inherit; 
    font-style: inherit; 
    font-weight: inherit; 
    font-size: 100%; 
} 

/* end reset */ 

#container { 
    margin: 0 auto; 
    width: 800px; 
    background-color: red; 
} 

#sidebar { 
    display: inline; 
    float: left; 
    width: 130px; 
    background-color: green; 
} 

#main { 
    float: left; 
    background-color: blue; 
    width: expression(document.getElementById('sidebar') == null ? "100%" : "670px"); 
    max-width: 100%; 
} 

#sidebar + #main { 
    width: 670px; 
    background-color: yellow; 
} 

#clear { 
    clear: both; 
    height: 1px; 
    font-size: 0px; 
} 
</style> 
</head> 
<body> 
<div id="container"> 
    <div id="sidebar"><p>This is the side bar</p></div> 
    <div id="main"><p>This needs to expand to fill available width, what if I have sufficient content in here to push this div so it spans across the whole width of the page like so...</p></div> 
    <div id="clear"></div> 
</div> 
</body> 
</html>

來源

2009-11-11 Greg K

是不是CSS表達式是具體的？ – rahul 2009-11-11 11:53:01

是的，這就是爲什麼我正在尋找解決方案來移除它。 – 2009-11-11 12:06:20

+鄰接選擇器會這樣做，除非在IE6中它不被支持。通常的解決辦法是增加一些額外的類信息：在樣式表

<div id="container" class="with-sidebar">

然後選擇是：

#sidebar { float: left; width: 130px; } 
.with-sidebar #main { margin-left: 130px; }

這需要擴大，以填補可用寬度

然後不要打擾它使其漂浮;我不確定應該達到什麼。

也避免「繼承」的規則，他們不工作在IE之前的版本8

來源

2009-11-11 12:02:00 bobince

謝謝 - 我以爲我需要浮動圖層，以便它們會彼此相鄰（'＃side'旁邊的'＃sidebar'），而不是一個在另一個下面。 – 2009-11-11 12:22:14

最終的解決方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> 
<style type="text/css"> 
/* reset css */ 

* { 
    border: 0px none; 
    margin: 0; 
    padding: 0; 
    vertical-align: baseline; 
    font-size: 100%; 
} 

/* end reset */ 

#container { 
    margin: 0 auto; 
    width: 800px; 
    background-color: red; 
} 

#sidebar { 
    float: left; 
    width: 130px; 
    background-color: green; 
} 

#main { 
    background-color: blue; 
} 

.with-sidebar #main { 
    margin-left: 130px; 
} 
</style> 
</head> 
<body> 
<div id="container" class="with-sidebar"> 
    <div id="sidebar"><p>This is the side bar</p></div> 
    <div id="main"><p>This needs to expand to fill available width.</p></div> 
</div> 
</body> 
</html>

來源

2009-11-11 12:22:52

（您也可能會失去＃側欄+＃主要鄰接規則，因爲類解決方法可以在所有瀏覽器上運行。） – bobince 2009-11-11 12:55:41

好的，謝謝，已刪除 – 2009-11-11 14:35:12

沒有CSS表達式的可移除側欄佈局？

回答

相關問題