Html 使用引导的桌面式布局

我正在开发一个web应用程序，其行为应该或多或少类似于桌面应用程序，具有以下功能：

• 它必须占用所有浏览器空间（100%宽度和高度，无滚动），并具有以下4个主要元素：
  • 头球。它将包含主菜单。它必须固定在顶部

  • 带有对象窗格的左侧边栏

  • 侧边栏右侧的主要内容区域，在此区域将显示网格和数据。内容较大时必须可滚动

  • 固定在屏幕底部的页脚，仅当用户双击左侧边栏的对象时才可见。它还必须通过点击右上边框上的“X”按钮进行折叠

棘手的是，当我双击一个对象时，页脚（大约150-200px）必须可见并显示对象数据。侧边栏和主内容区域的高度都必须缩小，以便页脚不会重叠，并且当用户关闭页脚时，它们会恢复到全高

是否可以使用引导框架进行这样的布局？我一直在玩它，但我不能让它正常工作

---

提前谢谢，干杯

很抱歉发布这样一个一般性的问题，我花了一整天的时间在bootply上做测试，但没有找到合适的解决方案，所以我决定在这里提问

我决定从引导到基础，因为它提供了我在XY网格上寻找的确切特征。使用此框架，我的应用程序布局将如下所示：

<div class="grid-y medium-grid-frame">
  <div class="cell shrink header medium-cell-block-container">

    <!-- NAVIGATION BAR -->

  </div>

  <div class="cell medium-auto medium-cell-block-container">

    <div class="grid-x grid-padding-x">
      <div class="cell medium-4 medium-cell-block-y">

        <!-- SIDEBAR -->

      </div>

      <div class="cell medium-8 medium-cell-block-y">

        <!-- MAIN CONTENT -->

      </div>
    </div>

  </div>

  <div class="cell shrink footer">

    <!-- FOOTER -->

  </div>
</div>

---

下次我会更简洁，干杯

因此，这不是编码服务。预计您将使用到目前为止尝试过的代码。能否提供一些您一直在“玩弄”的代码？帮助我们，帮助你！这里有一个更详细的代码笔：[嗨！你能再检查一下链接吗？它似乎不起作用…谢谢！：）这里有一个更详细的代码笔：