2

我正在尝试制作一个类似灯箱的窗口，它有一个已知高度的标题栏和一个未知高度的内容区域。

我正在使用一个浮动的伪元素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-heightand来实现。overflow: auto但我想要一个标题栏，并且我希望滚动条只出现在窗口的内容区域中，如下图所示：

在此处输入图像描述

我可以overflow: auto在内容区域上max-height设置，但以百分比设置（我需要，因为我不能假设用户的视口高度）似乎被忽略了。

这种布局可以不使用 JS 吗？

这是一个可以玩的演示。窗口在视口下方溢出，尽管如果您删除了足够的内容（使其比视口短），它将垂直居中。

4

2 回答 2

1

给出bg height:100%;并给出window您想要的百分比高度更新演示

.bg {
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.5);
  text-align: center;
  height:100%; /* The important part you were missing */
}
.window {
  vertical-align: middle;
  display: inline-block;
  position: relative;
  height:75%; /* The height you desire */
}
.bg:before {
  content: '';
  height: 100%;
  vertical-align: middle;
  display: inline-block;  
}
.titlebar {
  height: 30px; /* arbitrary value but height is known and static */
  position: absolute;
  left: 0; right: 0;
}
.window .content {
  margin-top: 30px; /* same abritrary value as titlebar height */
  height:calc(100% - 60px); /* I would think that this would be 30px, 
                               but in practice it needed 60px... */
  overflow:auto;
}

附带说明一下，您应该将演示中的所有 CSS 包含在同一个位置，我很困惑为什么我的方法无法正常工作，直到我注意到在演示的最底部添加了填充

编辑

显然，您想要做的事情在纯 CSS 中是不可能的，因为您必须height将. 因此，我添加了一行 javascript，它完全按照您的要求工作windowauto

document.getElementsByClassName('window')[0].style.height = 
    document.getElementsByClassName('window')[0].offsetHeight + "px";

更新的演示

于 2013-11-06T17:29:54.323 回答
-3 
!important

在任何元素中都有可能解决这个问题。

于 2012-10-31T18:57:46.920 回答