gpt4 book ai didi

css - 限制显示:table-cell?标记的div的高度

转载 作者:行者123 更新时间:2023-11-28 12:19:05 26 4
gpt4 key购买 nike

问题:

我需要使用 display:table(在父 div 中)和 display:table-cell(在包含的 div 中)将一些内容垂直居中。这是有效的,除非内容垂直溢出。我想限制高度,以便在有任何垂直溢出时出现滚动条。

fiddle :

http://jsfiddle.net/PTSkR/110/

(请注意,在输出中,尽管我将高度设置为 160px,但 div 仍垂直展开)

CSS:

side-study-box {
background-color: white;
color: black;
border: 1px solid #3D6AA2;
text-align: center;
height: 160px !important;
display: table !important;
margin: 0px !important;
margin-left: -1px !important;
position: relative;
overflow-y: scroll;
width: 100%;
}

.side-study-box .side-box-content {
width: calc(100%);
height: 160px !important;
float: right;
display: table;
overflow-y: scroll;
}

.side-study-box .text-content-saved {
width: 100% !important;
font-size: 24px;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 160px !important;
max-height: 160px !important;
background-color: white;
padding: 0px !important;
margin: 0px !important;
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
border: 0px !important;
overflow-y: scroll;
}

最佳答案

这是您更新的 fiddle ,内容包装器上有最大高度。

.side-study-box {
background-color: white;
color: black;
border: 1px solid #3D6AA2;
display: table;
width: 100%;
border-spacing:1em;
}
.side-box-content {
width: 100%;
height: ;
display: table-cell;
}
.text-content-saved {
max-height:160px;
overflow:auto;
padding:5px;
}

http://jsfiddle.net/GCyrillus/6tLAu/

这里的第一个代码是:盒子不会变大。
在这里,第二个首先执行,如果内容很少,则将其居中。

.side-study-box {
background-color: white;
color: black;
border: 1px solid #3D6AA2;
display: table;
width: 100%;
border-spacing:1em;
height:160px;
}
.side-box-content {
width: 100%;
height: ;
display: table-cell;
vertical-align:middle;
}
.text-content-saved {
max-height:140px;
overflow:auto;
padding:5px;
}

关于css - 限制显示:table-cell?标记的div的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16908126/

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