时间戳

首页 > 解决方案 > 如何在 HTML/CSS 中有可选的分屏布局？

javascript - 如何在 HTML/CSS 中有可选的分屏布局？

问题描述

我有一个面板，里面装满了可以任意长度的图块，包括滚动超出视口的下限，因此当前正在使用垂直滚动。

我想要的是一个可选的下面板，它可以根据用户的要求显示或隐藏，它总是占据屏幕的下 25%。然后，上面的图块应缩小到其上方的滚动窗格，因此您可以独立滚动图块，而无需更改下面板的位置。

所以我需要一个外部容器，它始终是屏幕高度的 100%，没有滚动。

在其中，我想要一个可滚动的内容面板。如果这是唯一可见的面板，那么它应该占据外部容器的 100% 高度，从而产生主屏幕正在滚动的错觉。

当下部面板可见时，可滚动内容应仅占据屏幕高度的前 75%，滚动条仅占高度的 75% 以反映这一点。较低的 25% 是应该修复的新面板。下部面板也应该是可独立滚动的。因此，您最终会得到两个相互堆叠的独立滚动面板

我试过用 flexbox 来做到这一点，但没有任何运气。谁能告诉我我做错了什么？

小提琴下面

https://jsfiddle.net/cdg6815s/2/

.app-container {
  height: 100%;
  padding: 10px;
  background-color: blue;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.container {
  height: 80%;
  background-color: green;
  padding: 10px;
  flex: 0.8;
  overflow-y: scroll;
}

.logtailContainer {
  height: 20%;
  background-color: red;
  padding: 10px;
  flex: 0.2;
  overflow-y: scroll;
}

标签： javascripthtmlcssflexbox

解决方案

编辑： skobaljic 的评论是一种更简单的方法。我保留这个答案，因为它仍然有效。

我假设你想要这样的东西：

* {
  box-sizing: border-box;
}

.b {
  height: 100vh;
  margin: 0;
  padding: 0;
}

.app-container {
  height: 100vh;
  padding: 10px;
  background-color: blue;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.contentpanel {
  max-height: 75vh;
  background-color: green;
  padding: 10px;
  flex: 0 1 75vh;
  overflow-y: scroll;
}

.lowerpanel {
  max-height: 25vh;
  background-color: red;
  padding: 10px;
  flex: 0 1 25vh;
  overflow-y: scroll;
}
<body class="b">

  <div class="app-container">
    <div class="contentpanel">
      App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App
      tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br />
    </div>
    <div class="lowerpanel">
      Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br
      /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br />
    </div>
  </div>
</body>

几个问题：

  1. 您正在将.app-container高度设置为 100%，但是是什么。您需要设置参考，因此需要在 body/html 上设置高度。
  2. flexproperty 是简写 - 所以你设置了 flex 增长（你可能知道），但这是它增长的比率。将 flex-basis 属性设置为 height 可能是更好的方法。
  3. 我将高度值更改为vh单位以使用视口高度作为参考。
  4. 在您的元素上设置max-height而不是高度，允许它们缩小/增长但停止在特定的高度值。

推荐阅读