0

我确定我在做一些明显的错误，但我无法弄清楚。我的灯箱大小是动态的（百分比宽度），我希望灯箱中的内容在较小的屏幕上根据需要垂直滚动，而不会移动内容周围的边框（实际上是一个盒子阴影）。

作为一个额外的警告，我需要“容器” div 具有动态高度。当我将容器 div 设置为 height: 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>
4

1 回答 1

0

如果您的浏览器支持要求允许，请考虑绝对定位您的.containerdiv，并适当地设置其顶部、左侧等：

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

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

于 2014-10-10T15:49:18.150 回答