使用滚动内容垂直居中未知高度div

时间:2012-10-31 18:42:22

标签: html css centering

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

我正在使用a floating pseudoelement with 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-heightoverflow: auto应用于窗口元素来轻松实现。但是我想要一个标题栏,我希望滚动条只显示在窗口的内容区域中,如下图所示:

enter image description here

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

如果不使用JS,这种布局是否可行?

Here's a demo to play with。窗口溢出视口下方,但如果删除足够的内容(使其比视口短),它将垂直居中。

2 个答案:

答案 0 :(得分:1)

提供bg height:100%;并提供window所需的百分比高度Updated Demo

.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之外你必须windowauto。所以,我添加了一行javascript,它的工作方式与你需要的一样

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

Updated Demo

答案 1 :(得分:-2)

!important
任何元素中的

都可以解决这个问题。