Javascript 一个html布局问题

我想制作一个html布局，这是图像：

整个页面包含以下div：

Head
left
main01
main02

及管制组：

toogle_bar1
toogle_bar2

现在我想做出以下效果：

1头部取浏览器的指定高度，例如50px，并取浏览器的100%宽度。 2，默认情况下，main02不可见，因此main01 div与左侧的高度和宽度相同

3单击切换栏1时，左侧应隐藏/显示，如果不可见，则main01和main02（如果main02可见）将占据浏览器的所有宽度

4单击toggle_bar2时，main02应隐藏/显示，一旦可见，其宽度将与main01相同

5 main01和main02应具有明确的宽度和高度属性。 6调整窗口大小时，滚动条无论如何都不可见

事实上，我可以使用javascript实现，但我想知道是否可以使用js处理点击事件所需的纯cssof实现

因为现在我使用js，当点击切换按钮时，我将左侧设置为display:none，然后计算clientwidth，并设置main01or/和main02的宽度，我想知道这是否可以由浏览器计算出来

我一直认为，如果可以通过浏览器完成，我们应该避免做额外的职位咨询工作

---

有什么想法吗？

您可以在造型方面尝试以下方法之一：

a
a:link
a:focus
a:hover
a:visited
a:active

---

也许…

您可以在样式设计中尝试以下方法之一：

a
a:link
a:focus
a:hover
a:visited
a:active

---

也许…

您可以将remove CSS类添加到主包装器中

假设你有一个主包装，里面有左，中，右

然后，您可以从MainWrapper中添加或删除CSS类

.left-item, .right-item, .middle-item { // this are the classes in the Wrapper
some base info
}

.has-left.has-middle .left-item {
width:30%;
} 
.has-left.has-middle .middle-item {
width:70%;
}
.has-left.has-middle .right-item {
display:none;
}

你应该知道其他组合的作用

不，你只需要使用js来添加或删除你的css类，css会为你做这件事。 MainWrapper类：有左、有中、有右 移除其中一个，css将进行调整

---

听起来您不需要任何通用版本，所以这可以做到…

您可以将remove CSS类添加到主包装器中

假设你有一个主包装，里面有左，中，右

然后，您可以从MainWrapper中添加或删除CSS类

.left-item, .right-item, .middle-item { // this are the classes in the Wrapper
some base info
}

.has-left.has-middle .left-item {
width:30%;
} 
.has-left.has-middle .middle-item {
width:70%;
}
.has-left.has-middle .right-item {
display:none;
}

你应该知道其他组合的作用

不，你只需要使用js来添加或删除你的css类，css会为你做这件事。 MainWrapper类：有左、有中、有右 移除其中一个，css将进行调整

---

听起来你不需要任何通用版本，所以这可以做到…

我建议使用YUI为你做到这一点。我们不能使用额外的js库。你说main01和main02应该有明确的宽度。你是指百分比还是离散值？如果你想使用离散值，如果你的值太小，你用什么来填补正确的空白。如果没有差距，我认为百分比值是个好主意。如果两者都可见，则将宽度设置为45%，如果只有一个，则将宽度设置为90%…因此，请明确使用js来设置元素的宽度？我建议您使用YUI来完成此操作。我们不能使用额外的js库。您说main01和main02应该具有明确的宽度。你是指百分比还是离散值？如果你想使用离散值，如果你的值太小，你用什么来填补正确的空白。如果没有差距，我认为百分比值是个好主意。如果两者都可见，则将宽度设置为45%，如果只有一个，则将宽度设置为90%…那么明确地使用js来设置元素的宽度？