Question

我有一个div，其中包含另外三个div。第一个是可以折叠的工具栏（示例中为红色）。它具有固定的高度。第二个（黑色）必须填满所有剩余空间，如果红色的一个折叠，则必须扩展。第三个（绿色）实际上是一个连接到红色div底部的按钮。用户单击它时，它会折叠或展开红色的div。

<div id="container">
  <div id="tools">
  </div>
  <div id="hider">
  </div>
  <div id="work-area">
  </div>
</div>

我在jsfiddle上做了一个示例：https://jsfiddle.net/gpoa8s92/3/

我看不出如何使black div占用所有剩余空间。我尝试使用flexbox，它可以工作，但是绿色div不再附着在红色div的底部。

有没有使用尽可能少使用ass javascript的解决方案？

谢谢！

Answer 1

我认为您的解决方案可以通过flexbox来实现，只需将工具和工作区域作为同级放置，并首先设置静态height，flex-grow: 0和flex shrink: 0，并设置工作区域height: 100%，flex-grow: 1和flex shrink: 1。这将使工具占据100px的空间并保留工作区域。

由于切换按钮是工具的一部分，因此您可以将其放入其中，然后使用position: absolute和top: 100%将其移到外面，并使用工具position: relative将切换按钮固定在其底部

现在，您可以为工具创建一个类，以设置其height: 0并使用CSS过渡为其设置动画。

然后单击切换按钮，就可以切换工具上的类，并且该类应该是您想要的。

无需使用javascript即可切换工具的高度-有点混乱，但更易于访问，下面是一个示例：https://codepen.io/morganfeeney/pen/KiBty

为您准备了一个示例-我已经使用BEM方法来命名元素，并将使用过的元素缓存为变量。

const $toggleButton = $('.js-tools-toggle');
const $toggleContent = $('.js-tools-root');
const collapsedClass = 'tools--collapsed';
$toggleButton.on('click', function() {
  $toggleContent.toggleClass(collapsedClass);
})

.container {
  display: flex;
  flex-direction: column;
  height: 400px;
  background-color: blue;
}

.tools {
  transition: height 250ms ease-in-out;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100px;
}

.tools--collapsed {
  height: 0px;
}

.tools__content {
  height: 100%;
  background-color: green;
  overflow: hidden;
}

.tools__action {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  height: 20px;
  background-color: red;
}

.work-area {
  background-color: black;
  flex: 1 1 auto;
  height: 100%;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="tools js-tools-root">
    <div class="tools__content"> Content of tools</div>
    <div class="tools__action js-tools-toggle">
    toggle
    </div>
  </div>
  <div class="work-area">
    content of work area
  </div>
</div>

可折叠面板和空间填充

1 个答案: