javascript - CSS/Angular : Accordion as footer - styling issues

Question

我正在尝试构建这样的页面结构:

+---------------------------+
| Auto-fill / v scrollable ^|
|                          ||
|                          ||
|                          v|
+---------------------------+
| Fixed               [][][]|
+---------------------------+
| Fixed - Collapsable       |
+---------------------------+

其中 [] 是按钮。

我有一个 Plunk近似于上述结构，但存在一些问题:

• (已解决) 自动填充区域的垂直滚动条比它自己的区域更深。它应该在下一节停止。
• (已解决) 第一个 Accordion 组的标题(带有按钮)没有占据它的全部空间和/或按钮超出了标题空间。
• 由于我将“固定 - 可折叠”区域更改为具有最大高度，因此我需要一个自动垂直滚动条。

还有一个小问题:

• Accordion 组之间的间距有点太大。
• 按钮没有垂直居中。

锦上添花:

- 如果可以使用自动 v 滚动条将“固定 - 可折叠”区域设置为最大高度，那就太棒了。

关于如何解决这个问题有什么建议吗？谢谢!

我为按钮部分使用了 Accordion 组，因为这是使其与底部 Accordion 对齐并具有相同样式的最简单方法。不应该打开是正确的，内容是空的，永远不应该显示。欢迎使用其他方法来实现这一目标。

更新

我创建了一个更新的 Plunk footer 容器的高度更改为固定值(= 250，也是最大高度)，同时使 maincontent 容器相应地收缩和扩展。

更新 - 第 2 部分

我已经解决了第二个问题(标题样式关闭):

<accordion-group is-open="false" is-disabled="true">
  <accordion-heading>
    <a ng-href="" unclickable>&nbsp;</a>
    <span class="pull-right">
        <button class="btn-xs btn-primary">Save</button>
        <button class="btn-xs btn-primary">Cancel</button>
        <button class="btn-xs btn-primary">Close</button>
    </span>
  </accordion-heading>
</accordion-group>

如您所见，我添加了 is-disabled="true" 以 100% 确定 Accordion 无法打开。

背景之所以只填充了一部分，是因为没有内容。出于这个原因，我添加了一个不间断的空间。但是，这意味着将鼠标悬停在它上面会为您提供“手形”光标，这可能会使人感到困惑。所以我添加了一个指令，使光标在悬停时成为“默认”:

app.directive("unclickable", function () {
      return {
          restrict: "A",
          scope: false,
          controller: function ($scope, $element) {
              $element.bind("click", function () {
                document.getElementById("top").focus();
              });
              $element.bind("mouseover", function () {
                  $element.css("cursor", "default");
              });
          },
          link: function ($scope, $elem, $attrs) {
          }
      }
  });

非常小的问题:如果你找到不间断的空间并点击它，那么焦点就会在它上面。对点击的(重新)设置焦点不起作用。

Answer 1

要解决垂直滚动条问题，您可以将 position: fixed 也设置为您的 .maincontent，如下所示:

.maincontent {
  position:fixed;
  top: 40px;
  bottom: 85px;
  right: 0;
  left: 0;
  overflow: auto;
}

然后您可以调整 top 和 bottom 值以适合页眉/页脚大小。

更新:

在您的示例中，整个文档都在滚动(因此滚动条具有完整的窗口高度)，如果您希望限制滚动条，您应该在元素内滚动，在您的情况下为 .maincontent。 overflow: auto 处理了这一点 ( docs ):它在 div 中添加了滚动条。其余代码只是固定定位，以填充布局中的剩余空间。