0

I have a DIV that's absolute positioned and has a defined height and width, and some content inside. Problem is, that when the div doesn't fit the viewports height, it becomes cropped out, like this:

NORMAL VIEWPORT


SMALL HEIGHT VIEWPORT

I've tried using overflow: scroll on overlay div (the black background), on the div itself and on the body but nothing worked (as expected), is there any solution without javascript?

HTML

<div id="overlay">
    <div id="login">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

CSS

#overlay{
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0,0,0,.8);
    z-index: 100;
}

#login{
    width: 250px;
    height: 320px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    margin: auto;
    background: #fff;
}
2
  • Post some code. Try with max-height:100%;
    – Miro
    Mar 21, 2016 at 18:41
  • have you tried the overflow:auto; value and max-height instead height ?
    – G-Cyrillus
    Mar 21, 2016 at 18:55

2 Answers 2

1

from my comment :

have you tried the overflow:auto; value and max-height instead height ?

#overlay{
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0,0,0,.8);
    z-index: 100;
}

#login{
    width: 250px;
    max-height: 320px;
  overflow:auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    margin: auto;
    background: #fff;
}
<div id="overlay">
    <div id="login">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

1
  • Thanks! This works, now a question, when I do this, I want a 50px margin above and below the div (I don't want it to use the 100% of the viewport height) Mar 21, 2016 at 19:08
0

use overflow: visible on that DIV and on the black background, and on the body: overflow: auto. That way you can scroll the body when the elements inside it are higher than the window height.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.