代码之家 › 专栏 › 技术社区 › Greg K

没有CSS表达式,可移除的侧栏布局是否可行?

xhtml css html

Greg K · 技术社区 · 16 年前

我有下面的布局和一个侧边栏,它只出现在一些页面上,而不是其他页面上。当边栏不存在时 #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>

2 回复 | 直到 16 年前

bobince 16 年前

这个 + 邻接选择器可以这样做,但在IE6中不支持它。通常的解决方法是添加一些额外的类信息:

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

然后在样式表中选择:

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

这需要扩展以填充可用宽度

那就别费心让它浮起来了,我不知道该怎么做。

也要避免“继承”规则,它们在版本8之前的IE中不起作用。

Greg K 16 年前

最终解决方案:

<!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>