html - 具有固定和可变宽度的复杂布局，使用可见性的选项卡等

Question

我有一个相当复杂的布局。

顶部和底部是固定的页眉/页脚。

中央显示屏分为两个面板:

• 左侧面板是可隐藏的(可能可见，也可能不可见)；如果它是可见的，那么它有一个固定的宽度。如果需要，里面有一个卷轴。
• 右侧面板始终可见且宽度可变。它由窗口的滚动条滚动。

然后右面板由两部分组成，每个部分填充面板的宽度 - 一组不同高度的选项卡(可见选项卡应该从右面板的顶部开始，因为这些选项卡的控制按钮是在标题中)，并且在其正下方是一个未知高度的“摘要”框，它紧跟在可见选项卡之后，无论我们正在查看哪个选项卡以及它有多高。

每个面板/选项卡/框都由一个外部 div 和内容所需的各种内部 div 组成。

标签由包含四个内部 div 的外部 div 组成，一个接一个。

我可以根据需要更改 HTML 和 css。

参见 https://jsfiddle.net/jvw8j62t/ (感谢 JavaSpyder 提供了我为这个演示改编的基本 JSFiddle)

---

左右面板我试过各种方法，最好的好像是https://stackoverflow.com/a/4676510但我很乐意使用不同的方法。

然后我使用 jquery 隐藏/显示左侧面板(使用 display:none)并相应地修复右侧面板的左边距，尽管我很乐意为此使用不同的系统。

但是必须使用 visibility: visible 和 visibility: hidden(不是 display:none)使选项卡可见/不可见，因为使用 display:none 时，选项卡内容的大小不正确。我无法轻易更改此设置，因为来自三个不同来源的三个不同库都存在此问题。

这意味着由于可见性 css，不同选项卡的顶部定位不正确 - 根据 https://stackoverflow.com/a/133064/1910690，它们相互跟随.

如果我尝试不同的方法使所有选项卡的顶部落在右侧面板的顶部，那么摘要框的位置是错误的，我无法将其对齐到可见选项卡下方(切换时更改位置到不同高度的选项卡)；或右侧面板的滚动困惑；或者选项卡的底部消失在页脚后面；或其他几个问题之一。

任何人都可以建议整个布局的解决方案吗？

Answer 1

是this您正在寻找什么样的东西？

我使用了一个 flex 容器来创建左右两部分——页眉和页脚位置固定就足够简单了。我在左侧部分使用了 flex-shrink:0，因此它的宽度是固定的，同时让右侧能够更改为屏幕宽度。

我不确定我是否按照您指定的方式制作了标签，但如果不正确，请随时更正。如果你点击一个选项卡，它会切换 visibility:hidden ，当然这会留下一个空白。您说“必须使用 visibility: visible 和 visibility: hidden(不是 display:none)使选项卡可见/不可见，因为使用 display:none 时，选项卡内容的大小不正确。”这是我们也可以看一下的东西吗，或者也许张贴在另一个问题中并在此处链接？如果我们能解决这个问题，就可以简化这个布局问题。

左边部分实际上是另一个固定位置的 div，带有 overflow:auto 以提供滚动条。高度由 jquery 处理。

最后，单击“切换左面板”将在固定位置 div 和左侧部分的宽度之间切换 0 或 200。