如何在HTML/CSS中有可选的分割屏幕布局？
如何在HTML/CSS中有可选的分割屏幕布局？
提问于 2020-12-11 14:26:04
我有一个面板，可以是任意长度的瓷砖，包括滚动到视口的下界，因此垂直滚动目前正在使用。
我想要的，是一个可选的较低的面板，可以显示或隐藏在用户的要求，这将永远占据屏幕的低25%。上面的瓷砖应该收缩到上面的滚动窗格，这样你就可以独立地滚动瓷砖，而不改变下面板的位置。
因此，我需要一个外部容器，总是100%的屏幕高度，没有滚动。
在此范围内，我想要一个可滚动的内容面板。如果这是唯一可见的面板，那么它应该占据外部容器100%的高度，产生主屏幕滚动的错觉。
当下面板可见时，可滚动的内容应该只占屏幕高度的前75%，滚动条仅占高度的75%来反映这一点。较低的25%是新的面板，应该是固定的。下面板也应该是独立滚动的。所以你最终会有两个独立的滚动面板堆叠在一起
我试过用柔性盒做这件事，但没有任何运气。有人能告诉我我做错了什么吗？
在下面小提琴
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
Stack Overflow用户
回答已采纳
发布于 2020-12-11 14:39:21
编辑：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上的高度设置为necessary. flex属性是速记--所以您正在设置flex (正如您可能知道的那样)，但这是它将增长的比率。将flex be属性设置为高度可能是更好的方法。- i将高度值更改为
vh单位，以便将视口高度作为元素上的
max-height而不是高度使用，允许它们收缩/增长，但停止在特定的高度值。
Stack Overflow用户
发布于 2020-12-11 15:57:55
如果使用flex，则可以在主容器上使用flex:1;或flex-grow:1，而不是设置固定的height，而只能在可以隐藏的第二个容器上设置height/min-height。要填充窗口，高度:100 to和对身体的边距重置在这里也是有效的。如果涉及到border和padding，也要考虑box-sizing模型，以便将它们包含在您的调整中。
下面是一个带有复选框的演示，用于切换第二个容器的隐藏/显示，并让box-sizing记住padding of .app-container来计算100 the的高度。
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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65253138
复制相关文章
相似问题
腾讯云开发者
