html - 具有滚动灵活面板的 CSS 布局

Question

我正在尝试构建一个简单的纯 CSS 布局，但遇到了很多麻烦:

我想要 3 个垂直面板。顶部面板——“banner”——固定在外容器的顶部。它的高度应由其内容决定——我不想要特定的或基于百分比的高度。如果我增加字体大小，或插入更大的图片，横幅的高度应该相应地改变，下面的面板也应该相应地改变高度。

中间面板 -- 'optional' -- 将包含一些可以增大或缩小的内容(同样，没有特定高度或百分比高度)，并且在有时我可能会隐藏或移除中间面板。对中间面板的更改会影响底部面板的高度，但不会影响横幅。

底部面板——“柔性”——应该固定在容器底部并向上生长。如果它有更多的内容可以在当前高度显示，它应该显示垂直滚动条。只有这个面板应该显示滚动条——我不希望它们出现在其他面板或外部容器上。如果“可选”面板缩小或隐藏，“灵活”面板的顶部应向上移动，只有在没有更多内部内容可显示时才停止。

这是我的草图。当 Optional 元素显示时，Flexible 元素应该有一个垂直滚动条:

$( function() {
  $('a').click( function() {
    $('.optional').toggle();
    return false;
  });
});

div, h1, p { margin: 0; padding: 5px; position: relative; }
h1 a { 
  font: .5em sans-serif; 
}

.container {
  outline: 1px solid pink;
  height: 420px;
  overflow: hidden;
}
.banner {
  outline: 1px solid blue;
}
.optional {
  outline: 1px solid orange;
}
.flexible {
  outline: 1px solid lime;
  min-height: 25%;
  overflow-y: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row banner">
    <h1>Hello world <a href="#">toggle optional</a></h1>
  </div>  
  <div class="row optional">
    <p>Optional 1</p>
    <p>Optional 2</p>
    <p>Optional 3</p>
    <p>Optional 4</p>
    <p>Optional 5</p>
  </div>
  <div class="row flexible">
    <p>flex01</p>
    <p>flex02</p>
    <p>flex03</p>
    <p>flex04</p>
    <p>flex05</p>
    <p>flex06</p>
    <p>flex07</p>
    <p>flex08</p>
    <p>flex09</p>
    <p>flex10</p>
  </div>
</div>

我很难仅使用 CSS 来实现它。我一直在各种组合中使用相对和绝对定位，但他们想知道元素的高度，而高度是动态的。我玩了一会儿 flexbox，但无法进行垂直扩展。

我可以使用各种 JavaScript——当文档加载或窗口大小改变时，获取外部容器的高度，获取横幅和可选面板的计算高度，并将灵活面板的高度设置为 containerHeight - ( bannerHeight + optionalHeight )。但我想尽可能避免使用 JS。仅限现代浏览器——IE10+、Chrome/Safari/FF current、iOS、Android。

可能吗？

Answer 1

如果您可以使用 flex 属性，您可以实现这一点(仅限年轻的浏览器)。对于较旧的浏览器，除非您允许 .container 增长，否则您仍然需要 javascript 将两个高度设置为 .optionnal 和 .flexible。

$(function() {
  $('a').click(function() {
    $('.optional').toggle();
    return false;
  });
});

div,
h1,
p {
  margin: 0;
  padding: 5px;
  position: relative;
}
h1 a {
  font: .5em sans-serif;
}
.container {
  outline: 1px solid pink;
  height: 420px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.banner {
  outline: 1px solid blue;
}
.optional {
  outline: 1px solid orange;
  flex: 1;
}
.flexible {
  outline: 1px solid lime;
  overflow-y: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row banner">
    <h1>Hello world <a href="#">toggle optional</a></h1>
  </div>
  <div class="row optional">
    <p>Optional 1</p>
    <p>Optional 2</p>
    <p>Optional 3</p>
    <p>Optional 4</p>
    <p>Optional 5</p>
  </div>
  <div class="row flexible">
    <p>flex01</p>
    <p>flex02</p>
    <p>flex03</p>
    <p>flex04</p>
    <p>flex05</p>
    <p>flex06</p>
    <p>flex07</p>
    <p>flex08</p>
    <p>flex09</p>
    <p>flex10</p>
  </div>
</div>

---

codepen to play with (在 optionnal 中添加更多内容进行测试)