我确定我做错了一些明显的错误，但我一直无法弄清楚。我的灯箱动态调整大小(百分比宽度)，并且我希望灯箱内的内容在较小的屏幕上根据需要垂直滚动，而不会移动内容周围的边框(实际上是框阴影)。
作为补充说明，我需要“容器”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>
最佳答案
如果您的浏览器支持要求允许，请考虑绝对定位您的 .container div，并适本地设置其顶部、左侧等:
div.container {
background-color: #6d6d6d;
padding: 20px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
如果您尝试在页面上放置其他元素，这会有一些缺点，但对于灯箱来说，这是一个合理的解决方案。
关于css - 如何让动态大小的灯箱正确溢出/滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26300606/