我有以下布局，侧边栏仅出现在某些页面上，而其他页面上没有。当侧边栏不存在时，#main 应该填充容器的可用宽度。
它有效，但使用了 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>
最佳答案
+ 邻接选择器可以做到这一点，除非在 IE6 中不支持它。通常的解决方法是添加一些额外的类信息:
<div id="container" class="with-sidebar">
然后在样式表中选择:
#sidebar { float: left; width: 130px; }
.with-sidebar #main { margin-left: 130px; }
This needs to expand to fill available width
那就不用让它漂浮了；我不确定这应该实现什么。
还要避免“继承”规则，它们在版本 8 之前的 IE 中不起作用。
关于html - 没有 CSS 表达式的可移动侧边栏布局可能吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1714699/