gpt4 book ai didi

html - 使用带有滚动区域的flexbox的灵活居中对话框

转载 作者:搜寻专家 更新时间:2023-10-31 22:40:18 25 4
gpt4 key购买 nike

如果你在寻找快速复制/粘贴的答案,代码就在这个问题的底部。
我已经试了至少一天了,试着创建一个flexbox对话框来正确地剪辑/滚动它的内容。
基本上我要创造的是:
enter image description here
对话框覆盖(阴影屏幕)是100vh/100vw,z顺序是坐在页面上任何已存在内容的前面,它设置为显示:居中的flex,因此它的唯一子(对话框)总是坐在页面的中心,无论它是什么大小,实现这一点的2个css规则如下:

.dialogOverlay {
z-index: 600;
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0,0,0,0.4);
display: flex;
justify-content: center;
align-items: center;
}

.dialogBase {
position: relative;
min-width: 120px;
min-height: 120px;
max-width: 75%;
max-height: 75%;
overflow: hidden;
background-color: white;
border: 1px solid black;
z-index: 601;
}

对话框的大小至少为120px乘以120px,并且不允许增长到页面宽度或高度的75%以上。
这一点都很好,正如预期的那样,一旦对话框达到最大的大小,任何溢出内容都被隐藏。
在“dialogbase”中有一个对话框内容体,它被设置为display:flex,因此它的两个子项(标题栏和内容区域)按行顺序堆叠在一起。
标题栏有固定的高度,也是一个flex容器(因为它有3个子项、标题文本和2个图标)。
剩余的对话框主体是flex:1,因此它使用了剩余的空间,这一切工作得非常好。如果我用内容填充对话框主体,它将强制调整对话框的大小以适应,并在最大大小时隐藏内容。
这些项的css如下:
.dialogContentBody {
z-index: 602;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}

.dialogContentBody .titleBar {
background-color: #6e6e6e;
color: white;
height: 50px;
width: 100%;
border-bottom: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}

.dialogContentBody .bodyContent {
overflow-y: scroll;
background-color: yellow;
flex: 1;
}

然而,问题是,当Y方向达到最大高度时,我希望正文内容滚动,因为有时添加到“ByDeCybe”内容会导致溢出,但是不管我怎么努力,我无论如何也无法获得溢出来给我滚动条。
目前,我认为body内容可以y滚动,但最终我想实现的是,body内容区域有一个全宽/全高div,它有一个固定宽度的侧栏,flex 1内容区域可以滚动。
到目前为止,我使用的html是:
<div class="dialogOverlay" data-bind="visible: isOpen">

<div class="dialogBase">

<div class="dialogContentOverlay" data-bind="visible: isBlocked">
<loadspinner params="{fontAwesomeSize: 5}"></loadspinner>
</div>

<div class="dialogContentBody">

<div class="titleBar">
<div class="titleContent" data-bind="text: pageTitle"></div>
<div class="iconContent okIcon">
<i class="fa fa-check-circle" data-bind="click: handleOkButton"></i>
</div>
<div class="iconContent closeIcon">
<i class="fa fa-times-circle" data-bind="click: handleCloseButton"></i>
</div>
</div>

<div class="bodyContent" data-bind="component: { name: bodyContentComponentName , params: bodyContentComponentParams}"></div>

</div>

</div>

</div>

警告是的,因为我在这里使用的是ko组件架构,“bodycontentcomponentname”最终将是我所说的内部内容,并将从独立组件集中注入。但是现在,我们可以想象在这个div中还有其他内容。
我知道的一件事是“溢出:隐藏”绝对值必须保持在“dialogbase”上,因为如果不是的话,所有的东西都会溢出到屏幕的底部。
然而,有趣的是,如果隐藏的溢出被移除,并且允许内容从对话框溢出到屏幕底部,则内容中的任何溢出滚动条仍然无法正常工作。
任何人能提供的任何帮助,或任何使这项工作的想法都是非常感谢的。
肖蒂
更新(大约10分钟后)
Evan如果我将内容缩减为固定高度为500px的以下最简单的情况,则仍然无法使对话框正文滚动:
<style>
.dialogOverlay {
z-index: 600;
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0,0,0,0.4);
display: flex;
justify-content: center;
align-items: center;
}

.dialogBase {
position: relative;
min-width: 120px;
max-width: 75%;
overflow: hidden;
height: 500px;
background-color: white;
border: 1px solid black;
margin: 10px;
z-index: 601;
}

.bodyContent {
background-color: yellow;
overflow-y: scroll;
}

</style>

<div class="dialogOverlay" data-bind="visible: isOpen">

<div class="dialogBase">

<div class="bodyContent" data-bind="compinent: { name: bodyContentComponentName , params: bodyContentComponentParams}">
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
<h1>Body content, Body Content</h1>
<p>body content</p>
</div>

</div>

</div>

根据micheal_b的答案更新
将100%添加到文档体仍然无法启用滚动条
<style>
.dialogOverlay {
z-index: 600;
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0,0,0,0.4);
display: flex;
justify-content: center;
align-items: center;
}

.dialogBase {
position: relative;
min-width: 120px;
//min-height: 120px;
max-width: 75%;
//max-height: 75%;
overflow: hidden;
height: 500px;
background-color: white;
border: 1px solid black;
margin: 10px;
z-index: 601;
}

.dialogContentBody {
z-index: 602;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}


.bodyContent {
//padding: 100px;
//overflow: hidden;
background-color: yellow;
flex: 1;
overflow-y: scroll;
height: 100%;
}

.dialogConAtentBody .bodyContent:empty {
display: none;
}
</style>

<div class="dialogOverlay" data-bind="visible: isOpen">

<div class="dialogBase">

<div class="dialogContentBody">

<div class="bodyContent" data-bind="compinent: { name: bodyContentComponentName , params: bodyContentComponentParams}">
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
<h1>Test Contnet, Test Content</h1>
<p>test content</p>
</div>

</div>

</div>

</div>

更多更新
在micheal b的帮助下,我让容器以固定在500px的高度滚动,不幸的是,即使返回到最小/最大伸缩高度,滚动仍然不起作用。从那时起,我还将容器追溯到html,并且在每个元素上都有一个固定的“height:100%”返回到顶部。
这个不行
<style>
.dialogOverlay {
z-index: 600;
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0,0,0,0.4);
display: flex;
justify-content: center;
align-items: center;
}

.dialogBase {
position: relative;
min-width: 120px;
min-height: 120px;
max-width: 75%;
max-height: 75%;
overflow: hidden;
background-color: white;
border: 1px solid black;
margin: 10px;
z-index: 601;
}

.dialogContentBody {
z-index: 602;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
height: 100%;
}


.bodyContent {
background-color: yellow;
flex: 1;
overflow-y: scroll;
height: 100%;
}

.dialogConAtentBody .bodyContent:empty {
display: none;
}
</style>

<div class="dialogOverlay" data-bind="visible: isOpen">

<div class="dialogBase">

<div class="dialogContentBody">

<div class="bodyContent" data-bind="compinent: { name: bodyContentComponentName , params: bodyContentComponentParams}">
.
.
.
lots of content
.
.
.
</div>

</div>

</div>

</div>

这个是的
<style>
.dialogOverlay {
z-index: 600;
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0,0,0,0.4);
display: flex;
justify-content: center;
align-items: center;
}

.dialogBase {
position: relative;
min-width: 120px;
max-width: 75%;
overflow: hidden;
height: 500px;
background-color: white;
border: 1px solid black;
margin: 10px;
z-index: 601;
}

.dialogContentBody {
z-index: 602;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
height: 100%;
}


.bodyContent {
background-color: yellow;
flex: 1;
overflow-y: scroll;
height: 100%;
}

.dialogConAtentBody .bodyContent:empty {
display: none;
}
</style>

<div class="dialogOverlay" data-bind="visible: isOpen">

<div class="dialogBase">

<div class="dialogContentBody">

<div class="bodyContent" data-bind="compinent: { name: bodyContentComponentName , params: bodyContentComponentParams}">
.
.
.
lots of content
.
.
.
</div>

</div>

</div>

</div>

根据micheal b的最后一条评论,绝对和相对位置也放置在两个外部容器上。
最终更新
因此,经过几个小时的挠头,一些愤怒的白板涂鸦,我的同事在这里在英国,一些奇妙的投入,从迈克尔逖b和lgson,解决方案原来是相当简单的描述。
在整个链条上重复你的最小/最大高度
michael_b是第一个意识到这是一个遗传问题的人,因为遗传问题太严重了,以至于有空隙回到了父母那里,在那里100%的高度计算都不见了。
然而,虽然这样做了,但其中有一些缺失的链接。lgson意识到,这些链接实际上是复制了链下的最小/最大规则,因此任何孩子也有一个链上的高度。
我希望我能把这两个回答都标记为答案,但遗憾的是,lgson的答案是最后让事情进展的答案,不幸的是,我不能分享所有代码,但我可以分享以下内容:
外部对话
<style>
.dialogOverlay {
z-index: 600;
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0,0,0,0.4);
display: flex;
justify-content: center;
align-items: center;
}

.dialogBase {
position: relative;
min-width: 120px;
min-height: 120px;
max-width: 75vw;
max-height: 75vh;
background-color: white;
border: 1px solid black;
margin: 10px;
z-index: 601;
overflow: hidden;
}

.dialogBase .titleBar {
background-color: #6e6e6e;
color: white;
height: 50px;
width: 100%;
border-bottom: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}

.dialogBase .titleBar .titleContent {
padding-left: 10px;
font-size: 2.5rem;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}

.dialogBase .titleBar .iconContent {
width: 50px; /* Square icons, 50x50 */
text-align: center;
font-size: 2.5rem;
}

.dialogBase .titleBar .iconContent.okIcon {
color: #449D44;
cursor: pointer;
}

.dialogBase .titleBar .iconContent.okIcon:hover {
color: #03FF03;
}

.dialogBase .titleBar .iconContent.closeIcon {
color: #C9302C;
cursor: pointer;
}

.dialogBase .titleBar .iconContent.closeIcon:hover {
color: #FF0600;
}

.bodyContent {
overflow-y: hidden;
min-height: 120px;
max-height: calc(75vh - 50px);
}

</style>

<div class="dialogOverlay" data-bind="visible: isOpen">

<div class="dialogBase">

<div class="titleBar">
<div class="titleContent" data-bind="text: pageTitle"></div>
<div class="iconContent okIcon">
<i class="fa fa-check-circle" data-bind="click: handleOkButton"></i>
</div>
<div class="iconContent closeIcon">
<i class="fa fa-times-circle" data-bind="click: handleCloseButton"></i>
</div>
</div>

<div class="bodyContent" data-bind="component: { name: bodyContentComponentName , params: bodyContentComponentParams}">ANOTHER COMPONENT IS INJECTED HERE</div>

</div>

</div>

内部对话框标记(注入的组件)
<style>
.dialogInnerContainer {
display: flex;
align-items: stretch;
-ms-align-content: stretch;
-webkit-align-content: stretch;
align-content: stretch;
}

.dialogInnerContainer .tabBar {
width: 60px;
background-color: orange;
border-right: 1px solid black;
}

.dialogInnerContainer .mainContentArea {
overflow-y: auto;
overflow-x: hidden;
min-height: 120px;
max-height: calc(75vh - 50px);
}
</style>

<div class="dialogInnerContainer">

<div class="tabBar">
Mini side bar content get's put in here
</div>

<div class="mainContentArea">
Generated main contnet that needs to scroll gets put in here
</div>

</div>

非常感谢所有对此有意见的人。
肖蒂

最佳答案

更新了标题和侧栏
使用percent和flexbox有时会给您带来不必要的问题。
此示例始终使用视区单位
这是个开始吗?
Fiddle demo, without side bar
Fiddle demo, with side bar

.dialogOverlay {
z-index: 600;
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0,0,0,0.4);
display: flex;
justify-content: center;
align-items: center;
}
.dialogBase {
position: relative;
background-color: white;
border: 1px solid black;
z-index: 601;
display: flex;
flex-direction: column
}
.bodyTitlebar {
background-color: gray;
color: white;
height: 50px;
border-bottom: 1px solid black;
padding: 5px;
box-sizing: border-box;
}
.bodyWrapper {
display: flex;
}
.bodySidebar {
overflow: hidden;
max-height: calc(75vh - 50px); /* compensate for title bar */
width: 100px;
padding: 5px;
box-sizing: border-box;
}
.bodyContent {
overflow-y: scroll;
min-width: 20px; /* side bar is 100 so we need the extra 20 here */
min-height: 70px; /* title bar is 50 so we need the extra 70 here */
max-height: calc(75vh - 50px); /* compensate for title bar */
max-width: calc(75vw - 100px); /* compensate for side bar */
flex:1;
padding: 5px;
border-left: 1px solid black;
}

<div class="dialogOverlay">
<div class="dialogBase">

<div class="bodyTitlebar">
Title bar
</div>

<div class="bodyWrapper">
<div class="bodySidebar">
<h1>Side bar</h1>
<p>side bar</p>
</div>

<div class="bodyContent">
<h1>Body content Body content </h1>
<p>body content</p>
<h1>Body content</h1>
<p>body content</p>
<h1>Body content</h1>
<p>body content</p>
<h1>Body content</h1>
<p>body content</p>
</div>

</div>
</div>
</div>

关于html - 使用带有滚动区域的flexbox的灵活居中对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38376107/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com