Question

我试图建立一个像这样的页面结构：

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

其中[]是按钮。

我有Plunk近似于上述结构，但有一些问题：

（已解决）自动填充区域的垂直滚动条比其自身区域更深。它应该停在下一部分。
（已解决）第一个手风琴组（带按钮）的标题不会占据它的完整空间和/或按钮突出标题空间。
因为我改变了“固定 - 可折叠”字样。要获得最大高度的区域，我需要一个自动垂直滚动条。

还有一个小问题：

手风琴组之间的间距有点过大。
按钮不是垂直居中的。

~~锦上添花：~~

~~- 如果＆＃39;固定 - 可折叠＆＃39;那将会很酷。可以使用自动v滚动条将区域设置为最大高度。~~

有关如何解决此问题的任何建议？谢谢！

我在按钮部分使用了一个手风琴组，因为这是让它与底部手风琴对齐并具有相同造型的最简单方法。它是正确的，它不应该打开，内容是空的，永远不应该显示。实现这一目标的替代方法是受欢迎的。

更新

我创建了一个更新的Plunk，其中页脚容器的高度更改为固定值（= 250，也就是最大高度），同时使主要容器缩小并相应地扩展

更新 - 第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 =＆＃34; true＆＃34; 100％确定手风琴无法打开。

背景只是部分填充的原因是因为没有内容。出于这个原因，我添加了一个不间断的空间。但是，这意味着将鼠标悬停在它上方可以为您提供“手”＆＃39;光标，这可能会让人困惑。所以当我悬停时，我已经添加了一个指令来使光标“默认”：

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中添加滚动条。其余代码只是一个固定的定位，以填充布局中的剩余空间。

Answer 2

你可以添加这个css：

   .pull-right
{

   position:fixed;
}

CSS / AngularJS：手风琴作为页脚 - 样式问题

2 个答案: