Question

我确定我做了一些明显不对的事，但我还没有弄清楚。我的灯箱动态调整大小（宽度百分比），我希望灯箱内的内容可以根据需要在较小的屏幕上垂直滚动，而不会在内容周围移动边框（实际上是框阴影）。

作为一个额外的警告，我需要＆＃34;容器＆＃34; div具有动态高度。当我将容器div设置为高度：100％时，灯箱的功能就像我想要的那样（参见下面的代码），但当我删除高度设置时，溢出不再正常工作。

我的灯箱演示应该有助于澄清我的问题：

http://viewer.zmags.com/publication/a82492b9?viewType=pubPreview

这是我的CSS：

html{
height: 100%;}

body {
font-family: Verdana, sans-serif;
font-weight: 400;
font-size: 12pt;
color: #FFFFFF;
padding: 0px;
margin: 0px;
background: #FF0000;
height: 100%;
overflow: hidden;}

div.container {
background-color: #6d6d6d;
padding: 20px;
height: 100%; <!-- I want to remove this, but can't figure out a way to get the same functionality without it -->
overflow: hidden;}

div.content {
background-color: #6d6d6d;
overflow: auto;
max-height: 100%;
margin: 0px auto;}

div#tab1 {
box-shadow: 0 0 0 1px #FFFFFF inset, 0 0 0 4px #be854C inset;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}

我的HTML：

<body>
<div class="container" id="tab1">
<div class="content">
<p>Lightbox content here.</p>
</div>
</div>
</body>
</html>

Answer 1

如果您的浏览器支持要求允许，请考虑绝对定位您的.container div，并正确设置其顶部，左侧等：

div.container {
  background-color: #6d6d6d;
  padding: 20px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

如果您尝试在页面上放置其他元素，那么这有一些缺点，但对于灯箱来说，这是一个合理的解决方案。

如何才能使动态大小的灯箱正常溢出/滚动？

1 个答案: