Div gets lost above top of screen - html

Question

sorry if this title isn't really the issue, I can't think of any other way to describe it.
If you look at the attached js fiddle, you'll see that there is a vertically centered div that grows off the top of the page, and cannot be seen or scrolled to.
https://jsfiddle.net/xdmkm2e4/
Please also see code below:
HTML:
<div class="container">
<div id="CONTENT">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
vitae molestie quam imperdiet. Integer mollis turpis nec metus tincidunt imperdiet. Aenean mollis at nisl at venenatis. Sed sodales, nibh ut aliquet fermentum, erat purus convallis orci, a feugiat purus ex sit amet dui. Pellentesque vel elementum
nisi, lobortis rutrum nibh. Donec at hendrerit metus. Nam elementum semper tortor, quis gravida ex suscipit sit amet. Sed at tellus suscipit augue varius posuere. Donec eu diam erat. Pellentesque tristique porttitor nisi sed lobortis. Proin tempor
elit sit amet est ultricies rutrum. Fusce sit amet cursus risus, sed tincidunt urna. Praesent ultrices mattis ullamcorper. Morbi quis mattis enim. Vivamus in magna ut lacus congue feugiat. Donec viverra ultrices nisi, id lacinia ante tempor eget.
Aenean in auctor tortor, vitae viverra mi. Vivamus facilisis dignissim massa id dignissim. Maecenas nec quam id libero lobortis vulputate. Nam in hendrerit arcu, vel luctus nulla. Nam eu nisl iaculis, vehicula justo id, finibus augue. Ut faucibus,
risus quis lacinia auctor, ex massa euismod nisi, nec vulputate nisi elit ut urna. Donec semper massa nec vestibulum iaculis. Aliquam odio sapien, porttitor in ultricies eget, efficitur a nisi. Nullam sagittis ex sit amet leo ullamcorper semper.
Quisque vitae pharetra nisl. Aliquam efficitur vulputate lectus nec accumsan. Aenean pulvinar sit amet ligula a iaculis. Aenean non odio ligula. Praesent arcu leo, scelerisque ut lorem et, fringilla scelerisque nulla. Ut porta felis vehicula, faucibus
ligula tincidunt, pulvinar urna. Ut nec nisi vel orci volutpat dapibus eu ut urna. In finibus sem vel mauris mattis viverra. Morbi vitae elit at lorem mollis cursus. Aenean nec enim faucibus, maximus est nec, maximus nibh. Pellentesque laoreet,
felis id rhoncus gravida, dolor lorem porttitor felis, et feugiat diam nibh at magna. Fusce mollis congue magna, et sollicitudin lectus maximus vel. Etiam ac nisi sed purus placerat faucibus vel at dui. Praesent vel orci at sem ultricies sodales
malesuada eu eros. Morbi commodo fermentum tellus eu gravida. Mauris accumsan bibendum velit, ac pharetra nisl blandit a. Aenean sed venenatis libero. Mauris id sapien quis felis volutpat mollis sed eget tortor. Quisque viverra maximus urna non
tristique. Donec venenatis elementum enim vitae viverra. Nam vitae nisi dictum, pellentesque urna nec, lobortis risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur interdum dolor ut nibh efficitur,
in iaculis sem iaculis. Quisque sit amet lacus eu metus posuere tincidunt. Aenean nec vulputate velit. Fusce cursus consectetur urna, ac aliquet sapien molestie nec. Nunc vel imperdiet purus. Etiam cursus accumsan magna at imperdiet. Sed fringilla
finibus laoreet. In elementum non est ac ultricies. Morbi enim turpis, convallis sed luctus non, dignissim id ante. Aenean sollicitudin fringilla elit, sit amet egestas diam aliquam et. Vestibulum non maximus odio. Proin consequat augue vel gravida
sagittis. Sed in gravida enim, in consequat dolor. Mauris vitae ligula ullamcorper turpis ultrices volutpat non id sem. Donec mollis est pellentesque, venenatis velit ut, mollis leo. Vestibulum sit amet dolor quis dolor facilisis vulputate. In placerat
ultrices ligula, eget maximus ex sodales id. Nunc at tristique diam. Fusce at elementum turpis, ac scelerisque purus. Donec convallis orci ac sem aliquet commodo. Aenean efficitur pharetra condimentum. Mauris eget magna at dui posuere faucibus cursus
vitae lectus. Sed pharetra neque augue, eget tempor enim porttitor porta. Integer tincidunt finibus risus, quis tempor nisi pellentesque sit amet. Maecenas mollis euismod libero, eu blandit risus commodo in. Aliquam eu velit varius lectus lobortis
fermentum vitae et augue. Integer mattis dignissim tristique. Nunc semper sapien ut ligula aliquam, nec pretium justo congue. Phasellus non felis egestas, scelerisque nibh vel, pellentesque odio. Nulla facilisi. Donec ullamcorper justo sem. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ut sapien vitae augue laoreet tincidunt nec ac lectus. Integer maximus elit a quam tristique ultrices. Sed a diam eget arcu semper euismod. Praesent efficitur quam
magna, auctor feugiat neque vulputate sed. Sed sodales iaculis hendrerit. Donec vestibulum enim a lorem accumsan, in suscipit massa tincidunt. Praesent a orci sapien. Nam convallis mi urna, at porttitor elit porta eu. Aliquam ligula mauris, tincidunt
ac maximus id, scelerisque sit amet purus. Etiam vehicula elementum porta. Nulla congue tincidunt mauris eu tempus. Donec rutrum interdum nunc, ac commodo nibh condimentum vulputate. Duis eu ante et nisl aliquam interdum eu ut sem. Mauris non porttitor
diam. Vivamus eleifend enim sit amet quam euismod pellentesque vitae ac purus. Aliquam erat volutpat. Nulla ac nibh ex. Etiam sed ullamcorper ipsum. Etiam posuere elementum orci a viverra. Suspendisse potenti. Donec metus magna, accumsan ac lacinia
quis, accumsan vulputate lorem. Aenean dictum turpis consequat iaculis faucibus. Duis nec odio non massa laoreet mattis. Nunc pharetra vitae arcu scelerisque fermentum. Aliquam non elementum libero. Mauris efficitur, nulla id sagittis viverra, orci
felis mattis magna, a vulputate orci purus ut lacus. In eleifend lacus ut ante faucibus, non rhoncus sem lobortis. Donec venenatis nunc sit amet varius laoreet. Vestibulum tristique, neque aliquet sagittis eleifend, nulla odio blandit tortor, quis
rutrum ligula ligula vel erat. Sed hendrerit dictum porta. Donec ullamcorper ligula non tortor dapibus, vulputate porttitor arcu gravida. Nam vitae nunc aliquet, mollis nisl ac, bibendum arcu. Aliquam at dapibus dui. Nulla at pharetra lorem. Fusce
efficitur in massa non lacinia. Proin vel lacus ipsum. Donec pharetra molestie libero quis imperdiet. Ut nec mauris quis turpis mattis gravida quis vitae massa. Morbi sodales urna eget ex tristique finibus. Donec eget arcu nisi. Aliquam quis eleifend
dolor. Praesent eu lobortis magna. Curabitur congue neque et mauris eleifend laoreet. Maecenas vel semper enim. Nulla ligula odio, accumsan ut laoreet sed, feugiat vitae diam. Mauris placerat ultrices tortor, vel dignissim nibh scelerisque fermentum.
In non consequat enim. Aliquam auctor mauris sit amet aliquet condimentum. Morbi nibh lorem, mattis ut metus sed, mattis sollicitudin odio. In hac habitasse platea dictumst. Sed tempus consequat felis, eu convallis lacus sagittis nec. In hac habitasse
platea dictumst. Praesent eget congue lacus, non tempor odio. Aliquam vitae augue lacinia, semper eros rutrum, elementum felis. Praesent pharetra nunc nisi, id suscipit nibh bibendum accumsan. Nam consectetur, metus eget malesuada suscipit, quam
diam ullamcorper leo, vel posuere dolor ligula non lacus. Nulla pharetra malesuada accumsan. Aenean faucibus vel justo quis tincidunt. Cras cursus sem nunc, eu tincidunt mauris facilisis vitae. Sed feugiat fermentum ipsum sed ultricies. Nullam suscipit
sapien a nisi blandit finibus. Aliquam pretium aliquam massa nec dapibus. Etiam vulputate, ipsum sed vestibulum pellentesque, turpis nulla blandit risus, sit amet vestibulum magna eros et tellus. Integer euismod congue orci sed tristique. Maecenas
eu sem eleifend, sollicitudin tortor suscipit, malesuada lacus. Nullam eleifend sollicitudin convallis. Cras volutpat vulputate pellentesque. Quisque laoreet cursus sapien, nec iaculis risus pharetra vitae. Cras non finibus ante. Suspendisse arcu
arcu, dignissim ut tellus et, venenatis hendrerit libero. Fusce et vestibulum purus, sed vulputate lectus. Suspendisse nec purus ac tellus blandit pellentesque. Ut a tincidunt ante. Vivamus congue dapibus tortor vitae dignissim. Maecenas eget tempus
ante, tincidunt fermentum ex. Duis molestie nulla vitae nisl vestibulum, a egestas purus posuere. Nunc pretium mollis eros eget pharetra. Nulla id feugiat dui. Nullam felis sapien, mattis porta massa at, pharetra dignissim augue. Cras semper urna
nec diam finibus, sed iaculis diam consequat. Sed vehicula laoreet tempus. Nunc pulvinar ipsum non velit interdum, eget sollicitudin nibh commodo. Duis massa sem, dictum sit amet elementum et, lacinia nec dui. Sed pulvinar elit sapien. Nunc sit
amet erat tincidunt, porta diam efficitur, egestas neque. Curabitur at ante ut massa condimentum cursus. Nullam pharetra, erat ac eleifend ultrices, est augue semper metus, ac rhoncus metus lorem vitae augue. Nulla sagittis, diam a mattis aliquet,
odio eros scelerisque nisl, id tincidunt nisi felis non ipsum. Morbi pulvinar a elit consequat malesuada. Vestibulum nec ligula facilisis, rhoncus mi laoreet, commodo quam. Nullam imperdiet aliquet dui in rutrum. Duis tristique massa sit amet arcu
efficitur imperdiet. Sed interdum erat id nunc euismod aliquet. Aenean in interdum urna. Aliquam dapibus magna nec dui rhoncus scelerisque. Fusce dignissim lobortis purus, eget facilisis purus. Proin tincidunt lectus vel eros volutpat feugiat. Ut
sed congue sem.
</p>
</div>
</div>
CSS:
#CONTENT {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70vw;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
z-index: 1;
padding: 20px;
}
My goal is to get it so that the top of the div is centered, but that content grows the div downwards rather than upwards.
Any help would be greatly appreciated!

Answer 1

Use {margin: 0 auto;} to center things at the top.
#CONTENT {
margin: 0 auto;
width: 70vw;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
padding: 2em
}
p {
text-align: justify;
text-justify: inter-word;
margin: .5em;
}
<div class="container">
<div id="CONTENT">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
</div>
</div>
Also, as #Bosc pointed out;
you can give the <div> a fixed height and make it scroll-able.
To achieve this you can use {overflow-y:scroll}
Like so
#CONTENT {
margin: 0 auto;
width: 70vw;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
padding: 2em;
overflow-y: scroll;
max-height: 50vh;
}
p {
text-align: justify;
text-justify: inter-word;
margin: .5em;
}
<div class="container">
<div id="CONTENT">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
</div>
</div>
You can also take it one step further and remove the scrollbar from the <div>
However, note that this is only supported by -webkit- browsers. The scrollbar will still show up for FF and IE users.
Open the snippet below with a webkit browser to see the effect:
#CONTENT {
margin: 0 auto;
width: 70vw;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
padding: 2em;
overflow-y: scroll;
max-height: 50vh;
}
#CONTENT::-webkit-scrollbar {
width: 0;
height: 0;
}
p {
text-align: justify;
text-justify: inter-word;
margin: .5em;
}
<div class="container">
<div id="CONTENT">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
</div>
</div>

Answer 2

Are you trying to get it vertically-aligned center? If not, you don't need to do the transform translate. From what I've seen it's only used for images.
If you do something like this it should work:
#CONTENT {
position: absolute;
top: 10%;
width: 70vw;
margin: 0 auto;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
z-index: 1;
padding: 20px;
}

Answer 3

I can't describe nicely but, I think this is what you wanted.
#CONTENT {
position: absolute;
top: 10%;
left: 10%;
width: 70vw;
margin-bottom: 20px;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
z-index: 1;
padding: 10px 20px;
}
I'll give you the jsfiddle link, https://jsfiddle.net/7evkdv20/