我有一个充满图块的面板，可以是任意长度，包括滚动超出视口的下限，因此当前正在使用垂直滚动。我想要的是一个可选的下部面板，可以根据用户的要求显示或隐藏，该面板始终占据屏幕下部的 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;}
2 回答
眼眸繁星
TA贡献1873条经验 获得超9个赞
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元素而不是高度，允许它们缩小/增长，但停止在特定的高度值。
皈依舞
TA贡献1851条经验 获得超3个赞
如果使用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
添加回答
举报
0/150
提交
取消