我正在尝试制作一个类似灯箱的窗口,它有一个已知高度的标题栏和一个未知高度的内容区域。
我正在使用一个浮动的伪元素vertical-align: middle
来垂直居中它。这完美地工作......当窗口的高度小于视口的高度时。
(来自 CSS-tricks 的复制粘贴代码)
/* This parent can be any width and height */
.block {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
我的问题是当滚动内容变得高于视口时,我不知道如何限制窗口高度并保持垂直居中。
如果窗口没有标题栏和内部内容区域,这很容易通过对窗口元素应用max-height
and来实现。overflow: auto
但我想要一个标题栏,并且我希望滚动条只出现在窗口的内容区域中,如下图所示:
我可以overflow: auto
在内容区域上max-height
设置,但以百分比设置(我需要,因为我不能假设用户的视口高度)似乎被忽略了。
这种布局可以不使用 JS 吗?
这是一个可以玩的演示。窗口在视口下方溢出,尽管如果您删除了足够的内容(使其比视口短),它将垂直居中。