如何在 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;
}
繁星点点滴滴浏览 107回答 2
2回答
-
眼眸繁星
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>几个问题：您将高度设置.app-container为 100%，但是是什么。你需要设置一个参考，所以在body/html上设置高度是必要的。flex属性是简写 - 所以你设置了 flex Growth （你可能知道），但这就是它将增长的比率。将 flex-basis 属性设置为高度可能是更好的方法。我将高度值更改为vh单位以使用视口高度作为参考。设置max-height元素而不是高度，允许它们缩小/增长，但停止在特定的高度值。 -
皈依舞
如果使用flex，则可以在主容器上使用flex:1;或flex-grow:1来代替设置固定，并且仅在可以隐藏的第二个容器上height设置height/ 。min-height为了填充窗口，height:100vh 和 body 的边距重置在这里也很有效。如果涉及border和，还要注意型号，将它们包含在您的尺码中。paddingbox-sizing这是一个带有复选框的演示，用于切换第二个容器的隐藏/显示，并box-sizing注意padding计算.app-container100vh 高度。body { margin: 0;}.app-container { height: 100vh; padding: 10px; background-color: blue; overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box;}.contentpanel { background-color: green; padding: 10px; flex: 1; overflow-y: scroll;}.lowerpanel { height: 20%; background-color: red; padding: 10px; min-height: 4em; overflow-y: scroll;}/* demo purpose CSS to use input/label to toggle display of lowerpanel */#hide { position: absolute; right: 100vw;}[for="hide"] { cursor: pointer; background: #bee; border: 1px solid; border-radius: 5px; padding: 0.25em; display: block; width: max-content; margin: auto;}#hide:checked~.lowerpanel { display: none;}<div class="app-container"> <input type="checkbox" id="hide"><!-- input for demo purpose --> <div class="contentpanel"> <label for="hide">toggle red container</label><!-- label for demo purpose --> 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
随时随地看视频慕课网APP
相关分类
JavaScript