title: Overflow with CSS, need sometimes a scrollbar and sometimes not (overlay box) dynamical screenheight
body: <p>i've a problem with height:auto and overflow:auto;. </p>
  
  <p>I've created a overlay with dynamical content. Sometimes the content leaves the visible screen and then a scrollbar should be shown to prevent cutting the content. My bad looking solution is setting height to 100% that fills the screen with a empty white area. If the height is missing or not set all browsers arn't able to reconize that the acp_message should have a scrollbar</p>
  
  <p>How to be sure that the scrollbar will be shown if height is auto?</p>
  
  <pre><code>$(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);
  
      });
  });
  </code></pre>
  
  <p>now the css: </p>
  
  <pre><code>.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 &gt; 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;
  }
  </code></pre>
  
  <p>and finally the HTML </p>
  
  <pre><code>&lt;div class="box" id="box" style="overflow:auto;"&gt;
   &lt;a class="boxclose" id="boxclose"&gt;Schlie&amp;szlig;en&lt;/a&gt;
   &lt;h1&gt;Rechnung erstellen&lt;/h1&gt;
   &lt;p id="acp_message"&gt;
    Rechnung erstellen
   &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>