javascript - 一个html布局问题

Question

我想做一个html布局，这是图片:

整个页面包含 div:

Head
left
main01
main02

和控制div:

toogle_bar1
toogle_bar2

现在我想做出如下效果:

1) head 占浏览器的指定高度(例如 50px)，占浏览器的 100% 宽度。 2) 并且默认情况下，main02 是不可见的，所以main01 div 与left 高度相同，宽度为左边。

3) 当toggle_bar1点击时，left应该隐藏/显示，一旦不可见，main01(和main02 如果 main02 可见)将占据浏览器的所有宽度。

4) 当点击toggle_bar2时，main02应该被隐藏/显示，一旦它可见，它的宽度将与main01相同>.

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

其实我可以用javascript来实现，但是我想知道我是否可以使用纯css来实现(当然需要js来处理点击事件)？

由于我现在使用js，当toggle_bar1点击时，我将left设置为“display:none”，然后计算clientwidth，并设置宽度main01(or/and main02),不知道浏览器能不能计算出来？

我一直认为我们应该避免做额外的位置计算工作，如果它们可以由浏览器完成的话。

有什么想法吗？

Answer 1

您可以将删除的 CSS 类添加到主包装器。

假设您有 MainWrapper 并在其中“左”、“中”、“右”

然后您可以在 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 类:has-left，has-middle，has-right 删除其中一个，您的 CSS 就会调整。

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