Related
I am currently working on a table view in my Angular application I want to make a sticky header to provide better user experience. To achieve that in Chrome and Mozilla I used the following CSS code:
div.sticky-table-head {
overflow-y: auto;
overflow-x: auto;
height: 100%;
width: 100%;
}
.scroll{
margin-left: auto;
margin-right: auto;
}
.scroll th {
position: sticky;
top: 0;
background: lightblue;
}
.scroll td {
text-align: center;
padding: 5px;
background: lightgreen;
}
HTML:
<div>
<table class="scroll">
<thead>
<th>
<strong>ID</strong>
</th>
<th>
Column 1
</th>
<th>
Longer column 2
</th>
<th>
Column 3 that is longer
</th>
</thead>
<tbody>
<tr>
<td>ID</td>
<td>Data</td>
<td>DataDataDataData</td>
<td>DataDataDataDataDataDataDataData</td>
</tr>
...
</tbody>
</table>
</div>
I need to achieve the same effect on IE 11 without using any scripts or jQuery, only Angular mechanichs. Pure CSS and HTML would be the best.
Here is JSFiddle presenting current solution: https://jsfiddle.net/bn5L1fhm/
Is there any way that I can solve my problem without changing too much of my code?
IE doesn't support position: sticky and as far as I know, there is no standard way to achieve this with only CSS. You need script to achieve this in IE 11. We can only use position: fixed and listen for the scroll event of the page and use JavaScript to change the value of the position and top properties according to the current position of the viewport. The code used is like below:
var menu = document.querySelector('.menu');
var menuPosition = menu.getBoundingClientRect();
var placeholder = document.createElement('div');
placeholder.style.width = menuPosition.width + 'px';
placeholder.style.height = menuPosition.height + 'px';
var isAdded = false;
window.addEventListener('scroll', function() {
if (window.pageYOffset >= menuPosition.top && !isAdded) {
menu.classList.add('sticky');
menu.parentNode.insertBefore(placeholder, menu);
isAdded = true;
} else if (window.pageYOffset < menuPosition.top && isAdded) {
menu.classList.remove('sticky');
menu.parentNode.removeChild(placeholder);
isAdded = false;
}
});
.header {
height: 50px;
background-color: #ddcbaf;
text-align: center;
padding-top: 20px;
}
.menu {
margin: 0;
padding: 0;
width: 100%;
background-color: #BFFFF3;
text-align: center;
}
.sticky {
top: 0;
position: fixed;
}
.container {
padding: 0 20px;
color: #989898;
}
<div class="header">
Title
</div>
<div class="menu">Home</div>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
</div>
And the closest approach with your situation I found is the solutin in this answer, you could also refer to it.
I made a sticky navbar and I'm trying to center the menu and for some reason, I can't at all, it's driving me nuts. I can't figure out why and I have tried a lot of answers, none work.
HTML code here:
<!DOCTYPE html>
<html>
<head>
<title>Restaurant Titanic</title>
<link rel="stylesheet" type="text/css" href="indexC.css">
</head>
<body>
<nav class="navbar">
<ul class="menu-list">
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
</ul>
</nav>
</body>
</html>
CSS code here
body{
background-image: url("");
}
.navbar{
text-align: center;
background-color: rgba(0,0,0,0.5);
position: sticky;
position: -webkit-sticky;
top: 0;
}
.menu-list{
text-decoration: none;
list-style-type: none;
}
.menu-list li {
display: inline-block;
}
h1{
color: white;
padding-top: 50px;
}
You can use this code
body{
background-image: url("");
margin: 0;
padding: 0;
}
.navbar{
text-align: center;
background-color: #777;
position: sticky;
position: -webkit-sticky;
top: 0;
padding: 15px;
}
.menu-list{
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu-list li {
display: inline-block;
}
.menu-list li a {
margin: 0;
padding: 0 30px;
text-decoration: none;
color: #ffffff;
font-size: 20px;
text-align: center;
}
.main p {
margin: 0;
padding: 30px;
color: #333333;
font-size: 20px;
font-weight: 500;
}
<nav class="navbar">
<ul class="menu-list">
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
</ul>
</nav>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet tempus diam id varius. Curabitur quis placerat quam, sit amet consectetur odio. Aliquam mollis ac arcu sed viverra. Fusce et augue felis. Phasellus consequat ipsum sem, sit amet volutpat tortor ornare sit amet. Aliquam leo ante, sodales non faucibus sollicitudin, cursus sed lacus. Donec at finibus magna. Etiam porttitor, mi eget luctus viverra, lacus elit rhoncus nisl, quis pulvinar mauris purus eget lorem. In et nibh vitae tortor venenatis eleifend vitae quis turpis. Integer vestibulum nisi quam, varius commodo lacus lacinia vitae. Ut eget imperdiet eros, eget consectetur nulla. Nam nec semper est. Pellentesque scelerisque quam vel arcu tempus, sit amet mattis nulla luctus. Proin eu diam a justo accumsan dignissim vel eu elit. Mauris semper convallis massa eu ultrices.</p>
<p>Fusce quis nisl ac urna dignissim volutpat. Donec sed felis tincidunt, ornare orci eget, lacinia nunc. Quisque a lacus vel est ornare dignissim pretium quis neque. Mauris non velit et est laoreet laoreet. Aliquam feugiat non quam sit amet consequat. Proin a dolor tempor, pharetra arcu id, ullamcorper dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus fringilla dictum diam a varius. Vestibulum tempus pellentesque sem sit amet lobortis. Integer eu purus non erat feugiat cursus eu eget tortor. Mauris luctus, elit eu porta fermentum, ipsum neque pellentesque nunc, et mattis orci sem lacinia est. Sed eget est sed augue euismod aliquet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Ut eu felis eget erat lobortis fringilla ut quis libero. Curabitur in tortor mattis, consectetur ex a, interdum quam. Nullam luctus neque eget felis tristique, vitae posuere est rhoncus. Morbi id imperdiet lorem. Nulla porttitor posuere sapien ac condimentum. Nam ut est et ex suscipit finibus ac at tortor. Proin augue risus, gravida vitae lacus non, consectetur pharetra tortor. Sed tristique pretium elit ut imperdiet. Morbi tincidunt mattis justo, quis blandit sem imperdiet elementum. Aenean varius molestie sapien quis viverra. Aliquam convallis efficitur erat. Aliquam convallis id leo eu ultricies. Etiam placerat odio ac placerat congue. In hac habitasse platea dictumst. Integer vitae ipsum ut massa tempor commodo sed id odio. Nunc semper pellentesque augue non ornare.</p>
<p>Nam sit amet eros risus. Nam arcu lectus, tincidunt quis fringilla eget, eleifend id felis. Duis at suscipit elit. Nunc tellus velit, viverra id urna vitae, scelerisque congue diam. Donec a nibh id nisi blandit tincidunt at at diam. Pellentesque accumsan diam turpis, hendrerit dapibus dolor finibus quis. Vivamus vulputate scelerisque enim, vitae rhoncus velit facilisis sed. Mauris laoreet eu eros sit amet auctor. Donec auctor molestie blandit.</p>
<p>Proin pretium nibh tortor, aliquam accumsan massa porttitor luctus. Donec facilisis nisi sit amet commodo egestas. Aenean quis hendrerit quam. Nam ut tellus lorem. Mauris sed rhoncus purus, eu tincidunt orci. Aliquam suscipit justo non laoreet ullamcorper. Morbi faucibus nisi vitae velit egestas posuere. Nam porta convallis diam non dignissim. Suspendisse est nisi, tincidunt sed ullamcorper at, facilisis sit amet nisl. Donec a enim non tellus posuere tincidunt. Curabitur a metus sagittis, commodo urna sit amet, efficitur ipsum. In sed diam pellentesque, feugiat metus sed, gravida orci. Cras tempus pellentesque euismod. Etiam sollicitudin lectus odio, eget vestibulum justo vestibulum et. Integer posuere feugiat neque, sed aliquam felis lobortis et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet tempus diam id varius. Curabitur quis placerat quam, sit amet consectetur odio. Aliquam mollis ac arcu sed viverra. Fusce et augue felis. Phasellus consequat ipsum sem, sit amet volutpat tortor ornare sit amet. Aliquam leo ante, sodales non faucibus sollicitudin, cursus sed lacus. Donec at finibus magna. Etiam porttitor, mi eget luctus viverra, lacus elit rhoncus nisl, quis pulvinar mauris purus eget lorem. In et nibh vitae tortor venenatis eleifend vitae quis turpis. Integer vestibulum nisi quam, varius commodo lacus lacinia vitae. Ut eget imperdiet eros, eget consectetur nulla. Nam nec semper est. Pellentesque scelerisque quam vel arcu tempus, sit amet mattis nulla luctus. Proin eu diam a justo accumsan dignissim vel eu elit. Mauris semper convallis massa eu ultrices.</p>
<p>Fusce quis nisl ac urna dignissim volutpat. Donec sed felis tincidunt, ornare orci eget, lacinia nunc. Quisque a lacus vel est ornare dignissim pretium quis neque. Mauris non velit et est laoreet laoreet. Aliquam feugiat non quam sit amet consequat. Proin a dolor tempor, pharetra arcu id, ullamcorper dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus fringilla dictum diam a varius. Vestibulum tempus pellentesque sem sit amet lobortis. Integer eu purus non erat feugiat cursus eu eget tortor. Mauris luctus, elit eu porta fermentum, ipsum neque pellentesque nunc, et mattis orci sem lacinia est. Sed eget est sed augue euismod aliquet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Ut eu felis eget erat lobortis fringilla ut quis libero. Curabitur in tortor mattis, consectetur ex a, interdum quam. Nullam luctus neque eget felis tristique, vitae posuere est rhoncus. Morbi id imperdiet lorem. Nulla porttitor posuere sapien ac condimentum. Nam ut est et ex suscipit finibus ac at tortor. Proin augue risus, gravida vitae lacus non, consectetur pharetra tortor. Sed tristique pretium elit ut imperdiet. Morbi tincidunt mattis justo, quis blandit sem imperdiet elementum. Aenean varius molestie sapien quis viverra. Aliquam convallis efficitur erat. Aliquam convallis id leo eu ultricies. Etiam placerat odio ac placerat congue. In hac habitasse platea dictumst. Integer vitae ipsum ut massa tempor commodo sed id odio. Nunc semper pellentesque augue non ornare.</p>
<p>Nam sit amet eros risus. Nam arcu lectus, tincidunt quis fringilla eget, eleifend id felis. Duis at suscipit elit. Nunc tellus velit, viverra id urna vitae, scelerisque congue diam. Donec a nibh id nisi blandit tincidunt at at diam. Pellentesque accumsan diam turpis, hendrerit dapibus dolor finibus quis. Vivamus vulputate scelerisque enim, vitae rhoncus velit facilisis sed. Mauris laoreet eu eros sit amet auctor. Donec auctor molestie blandit.</p>
<p>Proin pretium nibh tortor, aliquam accumsan massa porttitor luctus. Donec facilisis nisi sit amet commodo egestas. Aenean quis hendrerit quam. Nam ut tellus lorem. Mauris sed rhoncus purus, eu tincidunt orci. Aliquam suscipit justo non laoreet ullamcorper. Morbi faucibus nisi vitae velit egestas posuere. Nam porta convallis diam non dignissim. Suspendisse est nisi, tincidunt sed ullamcorper at, facilisis sit amet nisl. Donec a enim non tellus posuere tincidunt. Curabitur a metus sagittis, commodo urna sit amet, efficitur ipsum. In sed diam pellentesque, feugiat metus sed, gravida orci. Cras tempus pellentesque euismod. Etiam sollicitudin lectus odio, eget vestibulum justo vestibulum et. Integer posuere feugiat neque, sed aliquam felis lobortis et.</p>
</div>
This question already has answers here:
Bootstrap 4 how to have margin between columns without going over space
(2 answers)
Closed 3 years ago.
I have been building a webpage for a class and we are using Bootstrap 4.
Thing is, every time I add a margin to one of my elements with the .col-*-4 class it pushes down my third element and I have no idea how to fix this.
I have tried using flexbox, but that just completely messes up the layout of my section. I have tried using absolute positioning but it is just a complete hassle and I have no idea how to fix this. I don't know if I have the wrong keywords because I can't find anyone who has had this exact problem.
I have already tried to use the flexbox portion of bootstrap, but it completely screws up the layout that I intend to have, and I have tried using absolute positioning but it's a hassle to deal with and I know that there is a simpler way. I just can't figure it out.
/*Main Content*/
#menuTitle {
padding: 25px;
font-size: 2.5em;
font-weight: bold;
color: #000;
}
#chickenHeading,
#beefHeading,
#sushiHeading {
padding: 10px;
width: 200px;
}
#chicken,
#beef,
#sushi {
border-radius: 6px;
position: relative;
overflow: hidden;
}
#chickenBacktoTop,
#beefBacktoTop,
#sushiBacktoTop {
position: absolute;
bottom: 0;
right: 0;
border-radius: 6px;
}
h1 {
font-weight: 800;
}
p {
color: #A9A9;
}
/*Extra Large, Large, and Medium Devices*/
#media (min-width: 768px) {
#chicken,
#beef,
#sushi {
margin: 15px;
}
}
/*Extra Small and Small Devices*/
#media (max-width: 767px) {
#chicken,
#beef,
#sushi {
margin: 10px auto;
height: 650px;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!--Main Content-->
<div class='container-fluid mx-auto'>
<div id='menuTitle' class='text-center'>Our Menu</div>
<div class='row d-flex mx-auto'>
<!--Chicken Section-->
<section id='chicken' class='bg-dark col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
<h3 id='chickenHeading' class='d-flex mx-auto justify-content-center'>Chicken</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue lacus in luctus eleifend. Curabitur varius dictum lorem vel posuere. Curabitur blandit congue ante, eu dictum nisl rhoncus sit amet. Aenean cursus lorem at turpis consectetur faucibus.
Sed ultrices vehicula odio, eu laoreet neque suscipit quis. Aliquam sit amet lectus aliquam, suscipit massa id, pharetra ex. Nulla nisi nunc, posuere eget dignissim eget, malesuada sollicitudin libero. Quisque scelerisque porttitor ultricies.
Sed eget ex sed ante euismod malesuada eget fringilla arcu. Aenean egestas tincidunt gravida. Praesent non mattis nibh. Cras aliquet efficitur ex, non imperdiet felis feugiat ac. Aenean sagittis justo sit amet enim congue, nec finibus velit vestibulum.
Cras eros ante, tincidunt facilisis euismod sit amet, interdum ac diam. Suspendisse facilisis hendrerit sapien non ornare. Nullam nec magna nunc. Aliquam nisi magna, vehicula eu tellus eget, aliquam dignissim erat. Ut ut ullamcorper nisi. Etiam
iaculis fringilla lectus id pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eu tincidunt risus. Sed eu bibendum leo, vitae convallis elit. Donec feugiat tellus a velit suscipit condimentum.
Sed ut augue sagittis, facilisis mauris at, fermentum turpis. Duis dictum libero id dolor porttitor porttitor. Quisque tempor orci eu purus mollis, id semper tortor fringilla. Aliquam auctor pretium turpis at sodales. Morbi dictum neque arcu,
nec fringilla velit porttitor ac. Cras tristique vestibulum dolor, id cursus tortor ullamcorper sit amet. Nullam varius imperdiet risus vel volutpat. Aenean dapibus, urna sed lacinia suscipit, enim ligula bibendum orci, non mattis nulla nunc quis
dolor. Nunc neque ante, tristique vulputate mi et, finibus commodo urna. Integer faucibus in nisi consequat auctor. Aliquam quis odio eget lorem tempus pellentesque. Nam scelerisque viverra neque et ullamcorper. In ipsum nisl, sagittis ut est
quis, viverra venenatis tortor.
</p>
<a id='chickenBacktoTop' class='btn btn-primary d-block d-md-none' href='#header-nav'>Back to Top</a>
</section>
<!--Beef Section-->
<section id='beef' class='bg-dark col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
<h3 id='beefHeading' class='d-flex mx-auto justify-content-center'>Beef</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue lacus in luctus eleifend. Curabitur varius dictum lorem vel posuere. Curabitur blandit congue ante, eu dictum nisl rhoncus sit amet. Aenean cursus lorem at turpis consectetur faucibus.
Sed ultrices vehicula odio, eu laoreet neque suscipit quis. Aliquam sit amet lectus aliquam, suscipit massa id, pharetra ex. Nulla nisi nunc, posuere eget dignissim eget, malesuada sollicitudin libero. Quisque scelerisque porttitor ultricies.
Sed eget ex sed ante euismod malesuada eget fringilla arcu. Aenean egestas tincidunt gravida. Praesent non mattis nibh. Cras aliquet efficitur ex, non imperdiet felis feugiat ac. Aenean sagittis justo sit amet enim congue, nec finibus velit vestibulum.
Cras eros ante, tincidunt facilisis euismod sit amet, interdum ac diam. Suspendisse facilisis hendrerit sapien non ornare. Nullam nec magna nunc. Aliquam nisi magna, vehicula eu tellus eget, aliquam dignissim erat. Ut ut ullamcorper nisi. Etiam
iaculis fringilla lectus id pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eu tincidunt risus. Sed eu bibendum leo, vitae convallis elit. Donec feugiat tellus a velit suscipit condimentum.
Sed ut augue sagittis, facilisis mauris at, fermentum turpis. Duis dictum libero id dolor porttitor porttitor. Quisque tempor orci eu purus mollis, id semper tortor fringilla. Aliquam auctor pretium turpis at sodales. Morbi dictum neque arcu,
nec fringilla velit porttitor ac. Cras tristique vestibulum dolor, id cursus tortor ullamcorper sit amet. Nullam varius imperdiet risus vel volutpat. Aenean dapibus, urna sed lacinia suscipit, enim ligula bibendum orci, non mattis nulla nunc quis
dolor. Nunc neque ante, tristique vulputate mi et, finibus commodo urna. Integer faucibus in nisi consequat auctor. Aliquam quis odio eget lorem tempus pellentesque. Nam scelerisque viverra neque et ullamcorper. In ipsum nisl, sagittis ut est
quis, viverra venenatis tortor.
</p>
<a id='beefBacktoTop' class='btn btn-primary d-block d-md-none' href='#header-nav'>Back to Top</a>
</section>
<!--Sushi Section-->
<section id='sushi' class='bg-dark col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
<h3 id='sushiHeading' class='d-flex mx-auto justify-content-center'>Sushi</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue lacus in luctus eleifend. Curabitur varius dictum lorem vel posuere. Curabitur blandit congue ante, eu dictum nisl rhoncus sit amet. Aenean cursus lorem at turpis consectetur faucibus.
Sed ultrices vehicula odio, eu laoreet neque suscipit quis. Aliquam sit amet lectus aliquam, suscipit massa id, pharetra ex. Nulla nisi nunc, posuere eget dignissim eget, malesuada sollicitudin libero. Quisque scelerisque porttitor ultricies.
Sed eget ex sed ante euismod malesuada eget fringilla arcu. Aenean egestas tincidunt gravida. Praesent non mattis nibh. Cras aliquet efficitur ex, non imperdiet felis feugiat ac. Aenean sagittis justo sit amet enim congue, nec finibus velit vestibulum.
Cras eros ante, tincidunt facilisis euismod sit amet, interdum ac diam. Suspendisse facilisis hendrerit sapien non ornare. Nullam nec magna nunc. Aliquam nisi magna, vehicula eu tellus eget, aliquam dignissim erat. Ut ut ullamcorper nisi. Etiam
iaculis fringilla lectus id pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eu tincidunt risus. Sed eu bibendum leo, vitae convallis elit. Donec feugiat tellus a velit suscipit condimentum.
Sed ut augue sagittis, facilisis mauris at, fermentum turpis. Duis dictum libero id dolor porttitor porttitor. Quisque tempor orci eu purus mollis, id semper tortor fringilla. Aliquam auctor pretium turpis at sodales. Morbi dictum neque arcu,
nec fringilla velit porttitor ac. Cras tristique vestibulum dolor, id cursus tortor ullamcorper sit amet. Nullam varius imperdiet risus vel volutpat. Aenean dapibus, urna sed lacinia suscipit, enim ligula bibendum orci, non mattis nulla nunc quis
dolor. Nunc neque ante, tristique vulputate mi et, finibus commodo urna. Integer faucibus in nisi consequat auctor. Aliquam quis odio eget lorem tempus pellentesque. Nam scelerisque viverra neque et ullamcorper. In ipsum nisl, sagittis ut est
quis, viverra venenatis tortor.
</p>
<a id='sushiBacktoTop' class='btn btn-primary d-block' href='#header-nav'>Back to Top</a>
</section>
</div>
</div>
Margins increase column width, which causes them not to fit on the same line and to wrap.
However, Bootstrap columns have gutters (padding) by default.
Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
Bootstrap 4.0 Layout Grid - How It Works
I recommend wrapping the contents of each column in a containing <div> and styling that element as desired (e.g. padding, background color, etc).
For example:
<section class='col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
<div id='chicken' class='bg-dark'>
...
</div>
</section>
Here's a demonstration:
/*Main Content*/
#menuTitle {
padding: 25px;
font-size: 2.5em;
font-weight: bold;
color: #000;
}
.secContents {
position: relative;
border-radius: 6px;
padding: 0 15px;
}
.secHeading {
padding: 10px;
}
.secBackTop {
position: absolute;
bottom: 0;
right: 0;
border-radius: 6px;
}
h1 {
font-weight: 800;
}
p {
color: #A9A9;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<!--Main Content-->
<div class='container-fluid mx-auto'>
<div id='menuTitle' class='text-center'>Our Menu</div>
<div class='row d-flex mx-auto'>
<!--Chicken Section-->
<section class='col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
<div class='secContents bg-dark'>
<h3 class='secHeading d-flex mx-auto justify-content-center'>Chicken</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue lacus in luctus eleifend. Curabitur varius dictum lorem vel posuere. Curabitur blandit congue ante, eu dictum nisl rhoncus sit amet. Aenean cursus lorem at turpis consectetur faucibus.
Sed ultrices vehicula odio, eu laoreet neque suscipit quis. Aliquam sit amet lectus aliquam, suscipit massa id, pharetra ex. Nulla nisi nunc, posuere eget dignissim eget, malesuada sollicitudin libero. Quisque scelerisque porttitor ultricies.
Sed eget ex sed ante euismod malesuada eget fringilla arcu. Aenean egestas tincidunt gravida. Praesent non mattis nibh. Cras aliquet efficitur ex, non imperdiet felis feugiat ac. Aenean sagittis justo sit amet enim congue, nec finibus velit
vestibulum. Cras eros ante, tincidunt facilisis euismod sit amet, interdum ac diam. Suspendisse facilisis hendrerit sapien non ornare. Nullam nec magna nunc. Aliquam nisi magna, vehicula eu tellus eget, aliquam dignissim erat. Ut ut ullamcorper
nisi. Etiam iaculis fringilla lectus id pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eu tincidunt risus. Sed eu bibendum leo, vitae convallis elit. Donec feugiat tellus a velit suscipit
condimentum. Sed ut augue sagittis, facilisis mauris at, fermentum turpis. Duis dictum libero id dolor porttitor porttitor. Quisque tempor orci eu purus mollis, id semper tortor fringilla. Aliquam auctor pretium turpis at sodales. Morbi dictum
neque arcu, nec fringilla velit porttitor ac. Cras tristique vestibulum dolor, id cursus tortor ullamcorper sit amet. Nullam varius imperdiet risus vel volutpat. Aenean dapibus, urna sed lacinia suscipit, enim ligula bibendum orci, non mattis
nulla nunc quis dolor. Nunc neque ante, tristique vulputate mi et, finibus commodo urna. Integer faucibus in nisi consequat auctor. Aliquam quis odio eget lorem tempus pellentesque. Nam scelerisque viverra neque et ullamcorper. In ipsum nisl,
sagittis ut est quis, viverra venenatis tortor.
</p>
<a class='secBackTop btn btn-primary d-block d-md-none' href='#header-nav'>Back to Top</a>
</div>
</section>
<!--Beef Section-->
<section class='col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
<div class='secContents bg-dark'>
<h3 class='secHeading d-flex mx-auto justify-content-center'>Beef</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue lacus in luctus eleifend. Curabitur varius dictum lorem vel posuere. Curabitur blandit congue ante, eu dictum nisl rhoncus sit amet. Aenean cursus lorem at turpis consectetur faucibus.
Sed ultrices vehicula odio, eu laoreet neque suscipit quis. Aliquam sit amet lectus aliquam, suscipit massa id, pharetra ex. Nulla nisi nunc, posuere eget dignissim eget, malesuada sollicitudin libero. Quisque scelerisque porttitor ultricies.
Sed eget ex sed ante euismod malesuada eget fringilla arcu. Aenean egestas tincidunt gravida. Praesent non mattis nibh. Cras aliquet efficitur ex, non imperdiet felis feugiat ac. Aenean sagittis justo sit amet enim congue, nec finibus velit
vestibulum. Cras eros ante, tincidunt facilisis euismod sit amet, interdum ac diam. Suspendisse facilisis hendrerit sapien non ornare. Nullam nec magna nunc. Aliquam nisi magna, vehicula eu tellus eget, aliquam dignissim erat. Ut ut ullamcorper
nisi. Etiam iaculis fringilla lectus id pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eu tincidunt risus. Sed eu bibendum leo, vitae convallis elit. Donec feugiat tellus a velit suscipit
condimentum. Sed ut augue sagittis, facilisis mauris at, fermentum turpis. Duis dictum libero id dolor porttitor porttitor. Quisque tempor orci eu purus mollis, id semper tortor fringilla. Aliquam auctor pretium turpis at sodales. Morbi dictum
neque arcu, nec fringilla velit porttitor ac. Cras tristique vestibulum dolor, id cursus tortor ullamcorper sit amet. Nullam varius imperdiet risus vel volutpat. Aenean dapibus, urna sed lacinia suscipit, enim ligula bibendum orci, non mattis
nulla nunc quis dolor. Nunc neque ante, tristique vulputate mi et, finibus commodo urna. Integer faucibus in nisi consequat auctor. Aliquam quis odio eget lorem tempus pellentesque. Nam scelerisque viverra neque et ullamcorper. In ipsum nisl,
sagittis ut est quis, viverra venenatis tortor.
</p>
<a class='secBackTop btn btn-primary d-block d-md-none' href='#header-nav'>Back to Top</a>
</div>
</section>
<!--Sushi Section-->
<section class='col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
<div class='secContents bg-dark'>
<h3 class='secHeading d-flex mx-auto justify-content-center'>Sushi</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue lacus in luctus eleifend. Curabitur varius dictum lorem vel posuere. Curabitur blandit congue ante, eu dictum nisl rhoncus sit amet. Aenean cursus lorem at turpis consectetur faucibus.
Sed ultrices vehicula odio, eu laoreet neque suscipit quis. Aliquam sit amet lectus aliquam, suscipit massa id, pharetra ex. Nulla nisi nunc, posuere eget dignissim eget, malesuada sollicitudin libero. Quisque scelerisque porttitor ultricies.
Sed eget ex sed ante euismod malesuada eget fringilla arcu. Aenean egestas tincidunt gravida. Praesent non mattis nibh. Cras aliquet efficitur ex, non imperdiet felis feugiat ac. Aenean sagittis justo sit amet enim congue, nec finibus velit
vestibulum. Cras eros ante, tincidunt facilisis euismod sit amet, interdum ac diam. Suspendisse facilisis hendrerit sapien non ornare. Nullam nec magna nunc. Aliquam nisi magna, vehicula eu tellus eget, aliquam dignissim erat. Ut ut ullamcorper
nisi. Etiam iaculis fringilla lectus id pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eu tincidunt risus. Sed eu bibendum leo, vitae convallis elit. Donec feugiat tellus a velit suscipit
condimentum. Sed ut augue sagittis, facilisis mauris at, fermentum turpis. Duis dictum libero id dolor porttitor porttitor. Quisque tempor orci eu purus mollis, id semper tortor fringilla. Aliquam auctor pretium turpis at sodales. Morbi dictum
neque arcu, nec fringilla velit porttitor ac. Cras tristique vestibulum dolor, id cursus tortor ullamcorper sit amet. Nullam varius imperdiet risus vel volutpat. Aenean dapibus, urna sed lacinia suscipit, enim ligula bibendum orci, non mattis
nulla nunc quis dolor. Nunc neque ante, tristique vulputate mi et, finibus commodo urna. Integer faucibus in nisi consequat auctor. Aliquam quis odio eget lorem tempus pellentesque. Nam scelerisque viverra neque et ullamcorper. In ipsum nisl,
sagittis ut est quis, viverra venenatis tortor.
</p>
<a class='secBackTop btn btn-primary d-block' href='#header-nav'>Back to Top</a>
</div>
</section>
</div>
</div>
I am trying to have 2 rows with the height 100% of the windows. As you can see the 2 columns don't extend fully and the first box content overflows outside.
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
height: 100%;
flex-direction: row;
display: flex;
}
.nav {
background: hotpink;
flex: 1;
}
.main {
background: aliceblue;
flex: 1;
}
<div class="container">
<div class="nav">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi ante, faucibus a eros tristique, tincidunt sodales augue. Aenean volutpat tincidunt ligula, sed vestibulum ex bibendum sit amet. Suspendisse potenti. Suspendisse at orci quis magna pretium auctor mattis ac metus. Cras quis sollicitudin nulla. Etiam at dolor tellus. Donec luctus sagittis aliquet. In porta pulvinar neque, sit amet eleifend justo vestibulum et. Aenean gravida varius quam, quis auctor neque pellentesque eget.
Nulla interdum a nibh eget euismod. Sed molestie imperdiet ultricies. Mauris ut ligula id lectus aliquet pellentesque eget vitae eros. Nunc lobortis nisl nec diam dictum sodales. Ut ac mollis quam, ut tempus magna. Mauris convallis ut turpis a congue. Aenean aliquam, lacus non sodales pulvinar, nibh metus mollis lectus, quis lacinia magna sapien quis mi. Duis porttitor dui et nisl rutrum, vitae dictum turpis sodales. Pellentesque velit libero, molestie eget dignissim ac, faucibus eget nulla. Vestibulum sit amet mattis mi.
Nam lacus erat, venenatis nec facilisis sit amet, sollicitudin nec augue. Sed luctus suscipit lacus, ut scelerisque sem pellentesque et. Etiam luctus vel nisi sit amet porttitor. In ac ex porta, tempor lacus eget, ultricies arcu. Pellentesque ut ipsum venenatis leo placerat posuere vehicula quis diam. Cras ac semper urna, id condimentum risus. Curabitur neque ante, auctor vitae arcu ut, dignissim molestie est. Nunc consequat mattis facilisis. Fusce sed est sit amet purus iaculis mollis vitae in est. Proin tincidunt condimentum magna et vehicula.
Quisque id lacus risus. Nulla condimentum in justo quis vestibulum. Pellentesque non erat aliquam, blandit eros ac, finibus felis. Pellentesque porttitor felis dolor, vitae tincidunt tortor egestas vel. Quisque sit amet sagittis nulla. Phasellus vestibulum orci quis malesuada facilisis. Praesent tellus magna, euismod sed dictum in, tristique nec nunc. Sed leo odio, bibendum id lectus ac, finibus commodo urna. Nulla et dolor ultrices, aliquam nunc semper, tempor eros.
Duis sollicitudin nibh sed vehicula maximus. Fusce lacus lectus, volutpat a sapien vitae, aliquet rutrum enim. Integer tincidunt finibus vulputate. Ut iaculis lacinia semper. Aenean pretium in lorem quis mattis. Integer commodo, leo ac porttitor varius, libero lacus porttitor augue, et rutrum est mi in massa. Quisque vehicula hendrerit volutpat. Donec in nulla vel sem ultrices venenatis. Nulla nec placerat orci, in sollicitudin mi. Phasellus vitae dui et tortor aliquam dapibus sed sed purus. Duis mattis ornare eleifend. Phasellus aliquam nunc id nisl ultrices, ut gravida est gravida.
</div>
<div class="main">
content
</div>
</div>
Try using background-size: cover; and position: fixed; like this:
html,
body {
padding: 0;
margin: 0;
}
.container {
height: 100%;
flex-direction: row;
display: flex;
position: fixed;
}
.nav {
background: hotpink;
flex: 1;
background-size: cover;
}
.main {
background: aliceblue;
flex: 1;
}
<div class="container">
<div class="nav">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi ante, faucibus a eros tristique, tincidunt sodales augue. Aenean volutpat tincidunt ligula, sed vestibulum ex bibendum sit amet. Suspendisse potenti. Suspendisse at orci quis magna pretium auctor mattis ac metus. Cras quis sollicitudin nulla. Etiam at dolor tellus. Donec luctus sagittis aliquet. In porta pulvinar neque, sit amet eleifend justo vestibulum et. Aenean gravida varius quam, quis auctor neque pellentesque eget.
Nulla interdum a nibh eget euismod. Sed molestie imperdiet ultricies. Mauris ut ligula id lectus aliquet pellentesque eget vitae eros. Nunc lobortis nisl nec diam dictum sodales. Ut ac mollis quam, ut tempus magna. Mauris convallis ut turpis a congue. Aenean aliquam, lacus non sodales pulvinar, nibh metus mollis lectus, quis lacinia magna sapien quis mi. Duis porttitor dui et nisl rutrum, vitae dictum turpis sodales. Pellentesque velit libero, molestie eget dignissim ac, faucibus eget nulla. Vestibulum sit amet mattis mi.
Nam lacus erat, venenatis nec facilisis sit amet, sollicitudin nec augue. Sed luctus suscipit lacus, ut scelerisque sem pellentesque et. Etiam luctus vel nisi sit amet porttitor. In ac ex porta, tempor lacus eget, ultricies arcu. Pellentesque ut ipsum venenatis leo placerat posuere vehicula quis diam. Cras ac semper urna, id condimentum risus. Curabitur neque ante, auctor vitae arcu ut, dignissim molestie est. Nunc consequat mattis facilisis. Fusce sed est sit amet purus iaculis mollis vitae in est. Proin tincidunt condimentum magna et vehicula.
Quisque id lacus risus. Nulla condimentum in justo quis vestibulum. Pellentesque non erat aliquam, blandit eros ac, finibus felis. Pellentesque porttitor felis dolor, vitae tincidunt tortor egestas vel. Quisque sit amet sagittis nulla. Phasellus vestibulum orci quis malesuada facilisis. Praesent tellus magna, euismod sed dictum in, tristique nec nunc. Sed leo odio, bibendum id lectus ac, finibus commodo urna. Nulla et dolor ultrices, aliquam nunc semper, tempor eros.
Duis sollicitudin nibh sed vehicula maximus. Fusce lacus lectus, volutpat a sapien vitae, aliquet rutrum enim. Integer tincidunt finibus vulputate. Ut iaculis lacinia semper. Aenean pretium in lorem quis mattis. Integer commodo, leo ac porttitor varius, libero lacus porttitor augue, et rutrum est mi in massa. Quisque vehicula hendrerit volutpat. Donec in nulla vel sem ultrices venenatis. Nulla nec placerat orci, in sollicitudin mi. Phasellus vitae dui et tortor aliquam dapibus sed sed purus. Duis mattis ornare eleifend. Phasellus aliquam nunc id nisl ultrices, ut gravida est gravida.
</div>
<div class="main">
content
</div>
</div>
You could make it scrollable by using overflow: auto
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
height: 100%;
flex-direction: row;
display: flex;
}
.nav {
background: hotpink;
flex: 1;
overflow: auto;
}
.main {
background: aliceblue;
flex: 1;
}
<div class="container">
<div class="nav">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi ante, faucibus a eros tristique, tincidunt sodales augue. Aenean volutpat tincidunt ligula, sed vestibulum ex bibendum sit amet. Suspendisse potenti. Suspendisse at orci quis magna pretium auctor mattis ac metus. Cras quis sollicitudin nulla. Etiam at dolor tellus. Donec luctus sagittis aliquet. In porta pulvinar neque, sit amet eleifend justo vestibulum et. Aenean gravida varius quam, quis auctor neque pellentesque eget.
Nulla interdum a nibh eget euismod. Sed molestie imperdiet ultricies. Mauris ut ligula id lectus aliquet pellentesque eget vitae eros. Nunc lobortis nisl nec diam dictum sodales. Ut ac mollis quam, ut tempus magna. Mauris convallis ut turpis a congue. Aenean aliquam, lacus non sodales pulvinar, nibh metus mollis lectus, quis lacinia magna sapien quis mi. Duis porttitor dui et nisl rutrum, vitae dictum turpis sodales. Pellentesque velit libero, molestie eget dignissim ac, faucibus eget nulla. Vestibulum sit amet mattis mi.
Nam lacus erat, venenatis nec facilisis sit amet, sollicitudin nec augue. Sed luctus suscipit lacus, ut scelerisque sem pellentesque et. Etiam luctus vel nisi sit amet porttitor. In ac ex porta, tempor lacus eget, ultricies arcu. Pellentesque ut ipsum venenatis leo placerat posuere vehicula quis diam. Cras ac semper urna, id condimentum risus. Curabitur neque ante, auctor vitae arcu ut, dignissim molestie est. Nunc consequat mattis facilisis. Fusce sed est sit amet purus iaculis mollis vitae in est. Proin tincidunt condimentum magna et vehicula.
Quisque id lacus risus. Nulla condimentum in justo quis vestibulum. Pellentesque non erat aliquam, blandit eros ac, finibus felis. Pellentesque porttitor felis dolor, vitae tincidunt tortor egestas vel. Quisque sit amet sagittis nulla. Phasellus vestibulum orci quis malesuada facilisis. Praesent tellus magna, euismod sed dictum in, tristique nec nunc. Sed leo odio, bibendum id lectus ac, finibus commodo urna. Nulla et dolor ultrices, aliquam nunc semper, tempor eros.
Duis sollicitudin nibh sed vehicula maximus. Fusce lacus lectus, volutpat a sapien vitae, aliquet rutrum enim. Integer tincidunt finibus vulputate. Ut iaculis lacinia semper. Aenean pretium in lorem quis mattis. Integer commodo, leo ac porttitor varius, libero lacus porttitor augue, et rutrum est mi in massa. Quisque vehicula hendrerit volutpat. Donec in nulla vel sem ultrices venenatis. Nulla nec placerat orci, in sollicitudin mi. Phasellus vitae dui et tortor aliquam dapibus sed sed purus. Duis mattis ornare eleifend. Phasellus aliquam nunc id nisl ultrices, ut gravida est gravida.
</div>
<div class="main">
content
</div>
</div>
Or remove the height: 100% on .container so it's stretched by inner elements
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
flex-direction: row;
display: flex;
}
.nav {
background: hotpink;
flex: 1;
}
.main {
background: aliceblue;
flex: 1;
}
<div class="container">
<div class="nav">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi ante, faucibus a eros tristique, tincidunt sodales augue. Aenean volutpat tincidunt ligula, sed vestibulum ex bibendum sit amet. Suspendisse potenti. Suspendisse at orci quis magna pretium auctor mattis ac metus. Cras quis sollicitudin nulla. Etiam at dolor tellus. Donec luctus sagittis aliquet. In porta pulvinar neque, sit amet eleifend justo vestibulum et. Aenean gravida varius quam, quis auctor neque pellentesque eget.
Nulla interdum a nibh eget euismod. Sed molestie imperdiet ultricies. Mauris ut ligula id lectus aliquet pellentesque eget vitae eros. Nunc lobortis nisl nec diam dictum sodales. Ut ac mollis quam, ut tempus magna. Mauris convallis ut turpis a congue. Aenean aliquam, lacus non sodales pulvinar, nibh metus mollis lectus, quis lacinia magna sapien quis mi. Duis porttitor dui et nisl rutrum, vitae dictum turpis sodales. Pellentesque velit libero, molestie eget dignissim ac, faucibus eget nulla. Vestibulum sit amet mattis mi.
Nam lacus erat, venenatis nec facilisis sit amet, sollicitudin nec augue. Sed luctus suscipit lacus, ut scelerisque sem pellentesque et. Etiam luctus vel nisi sit amet porttitor. In ac ex porta, tempor lacus eget, ultricies arcu. Pellentesque ut ipsum venenatis leo placerat posuere vehicula quis diam. Cras ac semper urna, id condimentum risus. Curabitur neque ante, auctor vitae arcu ut, dignissim molestie est. Nunc consequat mattis facilisis. Fusce sed est sit amet purus iaculis mollis vitae in est. Proin tincidunt condimentum magna et vehicula.
Quisque id lacus risus. Nulla condimentum in justo quis vestibulum. Pellentesque non erat aliquam, blandit eros ac, finibus felis. Pellentesque porttitor felis dolor, vitae tincidunt tortor egestas vel. Quisque sit amet sagittis nulla. Phasellus vestibulum orci quis malesuada facilisis. Praesent tellus magna, euismod sed dictum in, tristique nec nunc. Sed leo odio, bibendum id lectus ac, finibus commodo urna. Nulla et dolor ultrices, aliquam nunc semper, tempor eros.
Duis sollicitudin nibh sed vehicula maximus. Fusce lacus lectus, volutpat a sapien vitae, aliquet rutrum enim. Integer tincidunt finibus vulputate. Ut iaculis lacinia semper. Aenean pretium in lorem quis mattis. Integer commodo, leo ac porttitor varius, libero lacus porttitor augue, et rutrum est mi in massa. Quisque vehicula hendrerit volutpat. Donec in nulla vel sem ultrices venenatis. Nulla nec placerat orci, in sollicitudin mi. Phasellus vitae dui et tortor aliquam dapibus sed sed purus. Duis mattis ornare eleifend. Phasellus aliquam nunc id nisl ultrices, ut gravida est gravida.
</div>
<div class="main">
content
</div>
</div>
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!
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>
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;
}
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/