CSS 溢出，有时需要滚动条，有时不需要（覆盖框）动态屏幕高度

Question

我对 height:auto 和 overflow:auto; 有疑问。

我创建了一个包含动态内容的叠加层。有时内容会离开可见屏幕，然后应显示滚动条以防止剪切内容。我看起来不好的解决方案是将高度设置为 100%，用空白区域填充屏幕。如果高度丢失或未设置所有浏览器都无法重新确认 acp_message 应该有滚动条

如果高度为自动，如何确保滚动条显示？

$(document).ready(function() {   
    var id;
   $('.order_options').on('click', 'span', function (e) {
   //$('#activator').click(function(){  
            $('#overlay').fadeIn('fast',function(){
                $('#box').animate({'top':'60px'},500);          
                $('#box').css('height', '100%');
                //$('#box').css('height', 'auto');
                $('#acp_message').css('margin-bottom', '250px');
                //$('#box').css('margin-bottom', '30px');
            }); 
        set_rechnung_erstellen(e.target.id);

    });
});

现在是 CSS：

.overlay {
    background:transparent url(../image/overlay.png) repeat top left;
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:100;
}
.box {
    position:fixed;
    top:-200px;
    left:30%;
    right:30%;
    background-color:#fff;
    color:#7F7F7F;
    padding:20px;
    border:2px solid #ccc;
    -moz-border-radius: 20px;
    -webkit-border-radius:20px;
    -khtml-border-radius:20px;
    -moz-box-shadow: 0 1px 5px #333;
    -webkit-box-shadow: 0 1px 5px #333;
    z-index:101;
    /*height:auto;*/
    /*height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');*/
}
.box h1{
    border-bottom: 1px dashed #7F7F7F;
    margin:-20px -20px 0px -20px;
    padding:10px;
    background-color:#FFEFEF;
    color:#EF7777;
    -moz-border-radius:20px 20px 0px 0px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -khtml-border-top-left-radius: 20px;
    -khtml-border-top-right-radius: 20px;
}
.
#acp_message {
   overflow:auto;
}

最后是 HTML

<div class="box" id="box" style="overflow:auto;">
 <a class="boxclose" id="boxclose">Schlie&szlig;en</a>
 <h1>Rechnung erstellen</h1>
 <p id="acp_message">
  Rechnung erstellen
 </p>
</div>

Answer 1

首先，您在 #acp_message 的规则之前有一个 .。这将违反该规则，因此请确保它不在您的代码中。

其次，使用 max-height 和 overflow:auto 来做你正在寻找的东西。这些都必须应用于同一个元素：

.box { height: auto; max-height:100%; overflow:auto; }

如果你想获取屏幕的准确高度并在 jQuery 中应用它，你也可以这样做：

$('.box').css('max-height', $(window).height() + 'px');