Overflow with CSS, need sometimes a scrollbar and sometimes not (overlay box) dynamical screenheight

Question

i've a problem with height:auto and overflow:auto;.

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

How to be sure that the scrollbar will be shown if height is auto?

$(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);

    });
});

now the 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;
}

and finally the 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>

i dont see any overlay div n what should be scrollable for dynamic content the msg or the complete overlay?? — Harsh
– Harsh, Commented Aug 9, 2014 at 16:43
Now it works. i've added the complete Markup. the "box" is outside of the screen, if you lunch your browser. oh! your right! will edit the code — Jan Bludau
– Jan Bludau, Commented Aug 11, 2014 at 13:47

adzza24 · Accepted Answer · 2014-08-11 08:35:29Z

1

Firstly, you have a . before your rule for #acp_message. This will break that rule, so make sure that is not in your code.

Secondly, use a max-height and overflow:auto to do what you are looking for. And these have to both be applied to the same element:

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

If you want to get the exact height of the screen and apply it in jQuery, you can do that as well:

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

answered Aug 11, 2014 at 8:35

adzza24

2,16318 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jan Bludau Over a year ago

It is confusing i tried it today again, with your solution it works with max-height:100% ...

Collectives™ on Stack Overflow

Overflow with CSS, need sometimes a scrollbar and sometimes not (overlay box) dynamical screenheight

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related