对话框随着内容增长，但不超过窗口高度(无JS)

Question

我们希望在我们的web应用程序中集成一个对话框。

我们有动态高度的内容，希望对话框和内容一样高，但是如果内容相对较高，我们不希望对话框比窗口高度高。

换句话说:将对话框中的内容换行，如果它使对话框比窗口高

这里是不能工作的:http://codepen.io/anon/pen/aClnr

没有JS可以吗?问题是动态高度…

要求:

• 我想让这个框水平和垂直居中
• 我想在顶部和底部设置一个边距(假设每个都是20px)´
• 我想让#contentContainer在溢出时可滚动，而不是盒子(因此保持20px填充)

当#contentBox滚动到#box的填充上时看起来不太好

不希望有这样的东西:
http://codepen.io/anon/pen/Ajltx

Answer 1

修改你的CSS:

#box {  
  width: 500px;
  margin: 0 auto;
  background: green;
  position: relative;
  overflow: auto;
  max-height: 100%;
}
#contentContainer {
   padding: 20px;
}

像这样，盒子将变得和body max一样高。当内容溢出窗口时，将出现一个滚动条。下面是演示:http://codepen.io/Nico_O/pen/jIJcb