I have a footer on my website, but part of it is not visible. Here is my code for the footer right now:
.arrows {
height: 50px;
width: 50px;
float: right;
position: fixed;
visibility: visible;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: #736F6E;
box-shadow: 0 0 15px #00214B;
}
#lang {
text-align: center;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non lectus mauris. In vitae lectus dui. Nam suscipit lobortis ultrices. Vestibulum id massa nec diam feugiat mollis. Ut hendrerit, turpis sed imperdiet euismod, est libero varius sem, sed luctus odio metus non dui. In hac habitasse platea dictumst. Curabitur id metus faucibus, iaculis velit vitae, maximus nulla.
Sed lobortis, sem eu viverra pulvinar, sem ligula porta ante, et luctus mi massa eu nisi. Donec ultrices nisi et dolor vulputate, quis rhoncus lectus pellentesque. Pellentesque scelerisque augue ut sapien tempor sollicitudin. Suspendisse molestie maximus libero, vel dictum tortor ultrices et. Duis non eleifend lacus, nec accumsan eros. Duis mattis eget lorem eu rutrum. Curabitur leo velit, sollicitudin a cursus ullamcorper, vestibulum at dui.
Pellentesque ultricies lacus sed tortor lobortis, a semper ex rhoncus. Sed nisi sapien, viverra vehicula ipsum quis, finibus euismod diam. Sed at dapibus est, semper sollicitudin lectus. Pellentesque porta dapibus dolor, sed laoreet leo maximus consequat. Sed dolor urna, facilisis in laoreet eget, posuere vel libero. In dapibus non lorem at convallis. In nec sagittis odio. Vivamus tempor ipsum vitae venenatis vehicula.
Integer elit risus, rhoncus faucibus varius ac, laoreet vestibulum augue. Fusce porttitor turpis eget sollicitudin euismod. Quisque tempus interdum nisi, ac molestie ex finibus eu. Etiam a dictum orci. Donec et iaculis ligula. Fusce in sapien eget nibh finibus blandit ut non magna. Nullam a lacus sem. Nulla at diam sed lorem finibus efficitur. Donec condimentum erat ut eros consequat porta. In ante nisi, commodo sed urna eget, iaculis tincidunt metus. Quisque lacinia non sapien et feugiat. Cras vel aliquam sem. Aenean at varius neque, quis venenatis erat. Phasellus condimentum tellus diam, in vulputate nibh suscipit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur feugiat consectetur scelerisque. Nunc elementum tempus porta. Aliquam at ligula tristique, sodales lectus eget, mollis sem. Suspendisse potenti. In vel lectus magna. Nulla et nunc consectetur risus dignissim maximus. Quisque quis ex in sapien convallis facilisis. Fusce ut molestie tellus, quis pharetra sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non lectus mauris. In vitae lectus dui. Nam suscipit lobortis ultrices. Vestibulum id massa nec diam feugiat mollis. Ut hendrerit, turpis sed imperdiet euismod, est libero varius sem, sed luctus odio metus non dui. In hac habitasse platea dictumst. Curabitur id metus faucibus, iaculis velit vitae, maximus nulla.
Sed lobortis, sem eu viverra pulvinar, sem ligula porta ante, et luctus mi massa eu nisi. Donec ultrices nisi et dolor vulputate, quis rhoncus lectus pellentesque. Pellentesque scelerisque augue ut sapien tempor sollicitudin. Suspendisse molestie maximus libero, vel dictum tortor ultrices et. Duis non eleifend lacus, nec accumsan eros. Duis mattis eget lorem eu rutrum. Curabitur leo velit, sollicitudin a cursus ullamcorper, vestibulum at dui.
Pellentesque ultricies lacus sed tortor lobortis, a semper ex rhoncus. Sed nisi sapien, viverra vehicula ipsum quis, finibus euismod diam. Sed at dapibus est, semper sollicitudin lectus. Pellentesque porta dapibus dolor, sed laoreet leo maximus consequat. Sed dolor urna, facilisis in laoreet eget, posuere vel libero. In dapibus non lorem at convallis. In nec sagittis odio. Vivamus tempor ipsum vitae venenatis vehicula.
Integer elit risus, rhoncus faucibus varius ac, laoreet vestibulum augue. Fusce porttitor turpis eget sollicitudin euismod. Quisque tempus interdum nisi, ac molestie ex finibus eu. Etiam a dictum orci. Donec et iaculis ligula. Fusce in sapien eget nibh finibus blandit ut non magna. Nullam a lacus sem. Nulla at diam sed lorem finibus efficitur. Donec condimentum erat ut eros consequat porta. In ante nisi, commodo sed urna eget, iaculis tincidunt metus. Quisque lacinia non sapien et feugiat. Cras vel aliquam sem. Aenean at varius neque, quis venenatis erat. Phasellus condimentum tellus diam, in vulputate nibh suscipit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur feugiat consectetur scelerisque. Nunc elementum tempus porta. Aliquam at ligula tristique, sodales lectus eget, mollis sem. Suspendisse potenti. In vel lectus magna. Nulla et nunc consectetur risus dignissim maximus. Quisque quis ex in sapien convallis facilisis. Fusce ut molestie tellus, quis pharetra sapien.
</p>
<div id="footer">
<p id="lang">Learning HTML...</p>
<img class="arrows" src="https://s21.postimg.org/pkx22n03n/right-big-color.png">
<img class="inactive arrows" src="https://s21.postimg.org/5c9ogx0sj/left-big-color.png">
</div>
Then, when I remove my <div id="lang">, I get this:
.arrows {
height: 50px;
width: 50px;
float: right;
position: fixed;
visibility: visible;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: #736F6E;
box-shadow: 0 0 15px #00214B;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non lectus mauris. In vitae lectus dui. Nam suscipit lobortis ultrices. Vestibulum id massa nec diam feugiat mollis. Ut hendrerit, turpis sed imperdiet euismod, est libero varius sem, sed luctus odio metus non dui. In hac habitasse platea dictumst. Curabitur id metus faucibus, iaculis velit vitae, maximus nulla.
Sed lobortis, sem eu viverra pulvinar, sem ligula porta ante, et luctus mi massa eu nisi. Donec ultrices nisi et dolor vulputate, quis rhoncus lectus pellentesque. Pellentesque scelerisque augue ut sapien tempor sollicitudin. Suspendisse molestie maximus libero, vel dictum tortor ultrices et. Duis non eleifend lacus, nec accumsan eros. Duis mattis eget lorem eu rutrum. Curabitur leo velit, sollicitudin a cursus ullamcorper, vestibulum at dui.
Pellentesque ultricies lacus sed tortor lobortis, a semper ex rhoncus. Sed nisi sapien, viverra vehicula ipsum quis, finibus euismod diam. Sed at dapibus est, semper sollicitudin lectus. Pellentesque porta dapibus dolor, sed laoreet leo maximus consequat. Sed dolor urna, facilisis in laoreet eget, posuere vel libero. In dapibus non lorem at convallis. In nec sagittis odio. Vivamus tempor ipsum vitae venenatis vehicula.
Integer elit risus, rhoncus faucibus varius ac, laoreet vestibulum augue. Fusce porttitor turpis eget sollicitudin euismod. Quisque tempus interdum nisi, ac molestie ex finibus eu. Etiam a dictum orci. Donec et iaculis ligula. Fusce in sapien eget nibh finibus blandit ut non magna. Nullam a lacus sem. Nulla at diam sed lorem finibus efficitur. Donec condimentum erat ut eros consequat porta. In ante nisi, commodo sed urna eget, iaculis tincidunt metus. Quisque lacinia non sapien et feugiat. Cras vel aliquam sem. Aenean at varius neque, quis venenatis erat. Phasellus condimentum tellus diam, in vulputate nibh suscipit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur feugiat consectetur scelerisque. Nunc elementum tempus porta. Aliquam at ligula tristique, sodales lectus eget, mollis sem. Suspendisse potenti. In vel lectus magna. Nulla et nunc consectetur risus dignissim maximus. Quisque quis ex in sapien convallis facilisis. Fusce ut molestie tellus, quis pharetra sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non lectus mauris. In vitae lectus dui. Nam suscipit lobortis ultrices. Vestibulum id massa nec diam feugiat mollis. Ut hendrerit, turpis sed imperdiet euismod, est libero varius sem, sed luctus odio metus non dui. In hac habitasse platea dictumst. Curabitur id metus faucibus, iaculis velit vitae, maximus nulla.
Sed lobortis, sem eu viverra pulvinar, sem ligula porta ante, et luctus mi massa eu nisi. Donec ultrices nisi et dolor vulputate, quis rhoncus lectus pellentesque. Pellentesque scelerisque augue ut sapien tempor sollicitudin. Suspendisse molestie maximus libero, vel dictum tortor ultrices et. Duis non eleifend lacus, nec accumsan eros. Duis mattis eget lorem eu rutrum. Curabitur leo velit, sollicitudin a cursus ullamcorper, vestibulum at dui.
Pellentesque ultricies lacus sed tortor lobortis, a semper ex rhoncus. Sed nisi sapien, viverra vehicula ipsum quis, finibus euismod diam. Sed at dapibus est, semper sollicitudin lectus. Pellentesque porta dapibus dolor, sed laoreet leo maximus consequat. Sed dolor urna, facilisis in laoreet eget, posuere vel libero. In dapibus non lorem at convallis. In nec sagittis odio. Vivamus tempor ipsum vitae venenatis vehicula.
Integer elit risus, rhoncus faucibus varius ac, laoreet vestibulum augue. Fusce porttitor turpis eget sollicitudin euismod. Quisque tempus interdum nisi, ac molestie ex finibus eu. Etiam a dictum orci. Donec et iaculis ligula. Fusce in sapien eget nibh finibus blandit ut non magna. Nullam a lacus sem. Nulla at diam sed lorem finibus efficitur. Donec condimentum erat ut eros consequat porta. In ante nisi, commodo sed urna eget, iaculis tincidunt metus. Quisque lacinia non sapien et feugiat. Cras vel aliquam sem. Aenean at varius neque, quis venenatis erat. Phasellus condimentum tellus diam, in vulputate nibh suscipit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur feugiat consectetur scelerisque. Nunc elementum tempus porta. Aliquam at ligula tristique, sodales lectus eget, mollis sem. Suspendisse potenti. In vel lectus magna. Nulla et nunc consectetur risus dignissim maximus. Quisque quis ex in sapien convallis facilisis. Fusce ut molestie tellus, quis pharetra sapien.
</p>
<div id="footer">
<img class="arrows" src="https://s21.postimg.org/pkx22n03n/right-big-color.png">
<img class="inactive arrows" src="https://s21.postimg.org/5c9ogx0sj/left-big-color.png">
</div>
Please can someone help me get the arrows and the <div id="lang"> showing at the same time. I couldn't find the answer anywhere. Also, could someone please tell me why there is a small gap at the left of my footer.
Thank you in advance.
Add a box-sizing:border-box property to #footer and position the position the element left:0
example
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: #736F6E;
box-shadow: 0 0 15px #00214B;
left: 0;
box-sizing: border-box;
border:solid red;
}
Snippet below
.arrows {
height: 50px;
width: 50px;
float: right;
position: fixed;
visibility: visible;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: #736F6E;
box-shadow: 0 0 15px #00214B;
left: 0;
box-sizing: border-box;
border:solid red;
}
#lang {
text-align: center;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non lectus mauris. In vitae lectus dui. Nam suscipit lobortis ultrices. Vestibulum id massa nec diam feugiat mollis. Ut hendrerit, turpis sed imperdiet euismod, est libero varius sem, sed luctus odio metus non dui. In hac habitasse platea dictumst. Curabitur id metus faucibus, iaculis velit vitae, maximus nulla.
Sed lobortis, sem eu viverra pulvinar, sem ligula porta ante, et luctus mi massa eu nisi. Donec ultrices nisi et dolor vulputate, quis rhoncus lectus pellentesque. Pellentesque scelerisque augue ut sapien tempor sollicitudin. Suspendisse molestie maximus libero, vel dictum tortor ultrices et. Duis non eleifend lacus, nec accumsan eros. Duis mattis eget lorem eu rutrum. Curabitur leo velit, sollicitudin a cursus ullamcorper, vestibulum at dui.
Pellentesque ultricies lacus sed tortor lobortis, a semper ex rhoncus. Sed nisi sapien, viverra vehicula ipsum quis, finibus euismod diam. Sed at dapibus est, semper sollicitudin lectus. Pellentesque porta dapibus dolor, sed laoreet leo maximus consequat. Sed dolor urna, facilisis in laoreet eget, posuere vel libero. In dapibus non lorem at convallis. In nec sagittis odio. Vivamus tempor ipsum vitae venenatis vehicula.
Integer elit risus, rhoncus faucibus varius ac, laoreet vestibulum augue. Fusce porttitor turpis eget sollicitudin euismod. Quisque tempus interdum nisi, ac molestie ex finibus eu. Etiam a dictum orci. Donec et iaculis ligula. Fusce in sapien eget nibh finibus blandit ut non magna. Nullam a lacus sem. Nulla at diam sed lorem finibus efficitur. Donec condimentum erat ut eros consequat porta. In ante nisi, commodo sed urna eget, iaculis tincidunt metus. Quisque lacinia non sapien et feugiat. Cras vel aliquam sem. Aenean at varius neque, quis venenatis erat. Phasellus condimentum tellus diam, in vulputate nibh suscipit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur feugiat consectetur scelerisque. Nunc elementum tempus porta. Aliquam at ligula tristique, sodales lectus eget, mollis sem. Suspendisse potenti. In vel lectus magna. Nulla et nunc consectetur risus dignissim maximus. Quisque quis ex in sapien convallis facilisis. Fusce ut molestie tellus, quis pharetra sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non lectus mauris. In vitae lectus dui. Nam suscipit lobortis ultrices. Vestibulum id massa nec diam feugiat mollis. Ut hendrerit, turpis sed imperdiet euismod, est libero varius sem, sed luctus odio metus non dui. In hac habitasse platea dictumst. Curabitur id metus faucibus, iaculis velit vitae, maximus nulla.
Sed lobortis, sem eu viverra pulvinar, sem ligula porta ante, et luctus mi massa eu nisi. Donec ultrices nisi et dolor vulputate, quis rhoncus lectus pellentesque. Pellentesque scelerisque augue ut sapien tempor sollicitudin. Suspendisse molestie maximus libero, vel dictum tortor ultrices et. Duis non eleifend lacus, nec accumsan eros. Duis mattis eget lorem eu rutrum. Curabitur leo velit, sollicitudin a cursus ullamcorper, vestibulum at dui.
Pellentesque ultricies lacus sed tortor lobortis, a semper ex rhoncus. Sed nisi sapien, viverra vehicula ipsum quis, finibus euismod diam. Sed at dapibus est, semper sollicitudin lectus. Pellentesque porta dapibus dolor, sed laoreet leo maximus consequat. Sed dolor urna, facilisis in laoreet eget, posuere vel libero. In dapibus non lorem at convallis. In nec sagittis odio. Vivamus tempor ipsum vitae venenatis vehicula.
Integer elit risus, rhoncus faucibus varius ac, laoreet vestibulum augue. Fusce porttitor turpis eget sollicitudin euismod. Quisque tempus interdum nisi, ac molestie ex finibus eu. Etiam a dictum orci. Donec et iaculis ligula. Fusce in sapien eget nibh finibus blandit ut non magna. Nullam a lacus sem. Nulla at diam sed lorem finibus efficitur. Donec condimentum erat ut eros consequat porta. In ante nisi, commodo sed urna eget, iaculis tincidunt metus. Quisque lacinia non sapien et feugiat. Cras vel aliquam sem. Aenean at varius neque, quis venenatis erat. Phasellus condimentum tellus diam, in vulputate nibh suscipit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur feugiat consectetur scelerisque. Nunc elementum tempus porta. Aliquam at ligula tristique, sodales lectus eget, mollis sem. Suspendisse potenti. In vel lectus magna. Nulla et nunc consectetur risus dignissim maximus. Quisque quis ex in sapien convallis facilisis. Fusce ut molestie tellus, quis pharetra sapien.
</p>
<div id="footer">
<p id="lang">Learning HTML...</p>
<img class="arrows" src="right-big-color.png">
<img class="inactive arrows" src="left-big-color.png">
</div>
Image alignment solution
add an id left to your left image and an id right to your right image
and style as follows:
#left{
left:0
}
#right{
right:0;
}
Snippet below
.arrows {
height: 50px;
width: 50px;
float: right;
position: fixed;
visibility: visible;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: #736F6E;
box-shadow: 0 0 15px #00214B;
}
#left{
left:0
}
#right{
right:0;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non lectus mauris. In vitae lectus dui. Nam suscipit lobortis ultrices. Vestibulum id massa nec diam feugiat mollis. Ut hendrerit, turpis sed imperdiet euismod, est libero varius sem, sed luctus odio metus non dui. In hac habitasse platea dictumst. Curabitur id metus faucibus, iaculis velit vitae, maximus nulla.
Sed lobortis, sem eu viverra pulvinar, sem ligula porta ante, et luctus mi massa eu nisi. Donec ultrices nisi et dolor vulputate, quis rhoncus lectus pellentesque. Pellentesque scelerisque augue ut sapien tempor sollicitudin. Suspendisse molestie maximus libero, vel dictum tortor ultrices et. Duis non eleifend lacus, nec accumsan eros. Duis mattis eget lorem eu rutrum. Curabitur leo velit, sollicitudin a cursus ullamcorper, vestibulum at dui.
Pellentesque ultricies lacus sed tortor lobortis, a semper ex rhoncus. Sed nisi sapien, viverra vehicula ipsum quis, finibus euismod diam. Sed at dapibus est, semper sollicitudin lectus. Pellentesque porta dapibus dolor, sed laoreet leo maximus consequat. Sed dolor urna, facilisis in laoreet eget, posuere vel libero. In dapibus non lorem at convallis. In nec sagittis odio. Vivamus tempor ipsum vitae venenatis vehicula.
Integer elit risus, rhoncus faucibus varius ac, laoreet vestibulum augue. Fusce porttitor turpis eget sollicitudin euismod. Quisque tempus interdum nisi, ac molestie ex finibus eu. Etiam a dictum orci. Donec et iaculis ligula. Fusce in sapien eget nibh finibus blandit ut non magna. Nullam a lacus sem. Nulla at diam sed lorem finibus efficitur. Donec condimentum erat ut eros consequat porta. In ante nisi, commodo sed urna eget, iaculis tincidunt metus. Quisque lacinia non sapien et feugiat. Cras vel aliquam sem. Aenean at varius neque, quis venenatis erat. Phasellus condimentum tellus diam, in vulputate nibh suscipit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur feugiat consectetur scelerisque. Nunc elementum tempus porta. Aliquam at ligula tristique, sodales lectus eget, mollis sem. Suspendisse potenti. In vel lectus magna. Nulla et nunc consectetur risus dignissim maximus. Quisque quis ex in sapien convallis facilisis. Fusce ut molestie tellus, quis pharetra sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non lectus mauris. In vitae lectus dui. Nam suscipit lobortis ultrices. Vestibulum id massa nec diam feugiat mollis. Ut hendrerit, turpis sed imperdiet euismod, est libero varius sem, sed luctus odio metus non dui. In hac habitasse platea dictumst. Curabitur id metus faucibus, iaculis velit vitae, maximus nulla.
Sed lobortis, sem eu viverra pulvinar, sem ligula porta ante, et luctus mi massa eu nisi. Donec ultrices nisi et dolor vulputate, quis rhoncus lectus pellentesque. Pellentesque scelerisque augue ut sapien tempor sollicitudin. Suspendisse molestie maximus libero, vel dictum tortor ultrices et. Duis non eleifend lacus, nec accumsan eros. Duis mattis eget lorem eu rutrum. Curabitur leo velit, sollicitudin a cursus ullamcorper, vestibulum at dui.
Pellentesque ultricies lacus sed tortor lobortis, a semper ex rhoncus. Sed nisi sapien, viverra vehicula ipsum quis, finibus euismod diam. Sed at dapibus est, semper sollicitudin lectus. Pellentesque porta dapibus dolor, sed laoreet leo maximus consequat. Sed dolor urna, facilisis in laoreet eget, posuere vel libero. In dapibus non lorem at convallis. In nec sagittis odio. Vivamus tempor ipsum vitae venenatis vehicula.
Integer elit risus, rhoncus faucibus varius ac, laoreet vestibulum augue. Fusce porttitor turpis eget sollicitudin euismod. Quisque tempus interdum nisi, ac molestie ex finibus eu. Etiam a dictum orci. Donec et iaculis ligula. Fusce in sapien eget nibh finibus blandit ut non magna. Nullam a lacus sem. Nulla at diam sed lorem finibus efficitur. Donec condimentum erat ut eros consequat porta. In ante nisi, commodo sed urna eget, iaculis tincidunt metus. Quisque lacinia non sapien et feugiat. Cras vel aliquam sem. Aenean at varius neque, quis venenatis erat. Phasellus condimentum tellus diam, in vulputate nibh suscipit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur feugiat consectetur scelerisque. Nunc elementum tempus porta. Aliquam at ligula tristique, sodales lectus eget, mollis sem. Suspendisse potenti. In vel lectus magna. Nulla et nunc consectetur risus dignissim maximus. Quisque quis ex in sapien convallis facilisis. Fusce ut molestie tellus, quis pharetra sapien.
</p>
<div id="footer">
<img class="arrows" id="left" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQwbFPJ67pZUsR6fr-UuJUarUFsSSUcdkhyr2fPYgEQzV9qyBQt">
<img id="right" class="inactive arrows" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQwbFPJ67pZUsR6fr-UuJUarUFsSSUcdkhyr2fPYgEQzV9qyBQt">
</div>
You need to add bottom: 0 to the arrows so they're fixed at the bottom, and add a left and right class and add left and right to them. Also remove the float on the arrows - that doesn't work with position: fixed
.arrows {
height: 50px;
width: 50px;
position: fixed;
visibility: visible;
bottom: 0;
}
.arrows.right {
right: 0;
}
.arrows.left {
left: 0;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: #736F6E;
box-shadow: 0 0 15px #00214B;
}
#lang {
text-align: center;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non lectus mauris. In vitae lectus dui. Nam suscipit lobortis ultrices. Vestibulum id massa nec diam feugiat mollis. Ut hendrerit, turpis sed imperdiet euismod, est libero varius sem, sed luctus odio metus non dui. In hac habitasse platea dictumst. Curabitur id metus faucibus, iaculis velit vitae, maximus nulla.
Sed lobortis, sem eu viverra pulvinar, sem ligula porta ante, et luctus mi massa eu nisi. Donec ultrices nisi et dolor vulputate, quis rhoncus lectus pellentesque. Pellentesque scelerisque augue ut sapien tempor sollicitudin. Suspendisse molestie maximus libero, vel dictum tortor ultrices et. Duis non eleifend lacus, nec accumsan eros. Duis mattis eget lorem eu rutrum. Curabitur leo velit, sollicitudin a cursus ullamcorper, vestibulum at dui.
Pellentesque ultricies lacus sed tortor lobortis, a semper ex rhoncus. Sed nisi sapien, viverra vehicula ipsum quis, finibus euismod diam. Sed at dapibus est, semper sollicitudin lectus. Pellentesque porta dapibus dolor, sed laoreet leo maximus consequat. Sed dolor urna, facilisis in laoreet eget, posuere vel libero. In dapibus non lorem at convallis. In nec sagittis odio. Vivamus tempor ipsum vitae venenatis vehicula.
Integer elit risus, rhoncus faucibus varius ac, laoreet vestibulum augue. Fusce porttitor turpis eget sollicitudin euismod. Quisque tempus interdum nisi, ac molestie ex finibus eu. Etiam a dictum orci. Donec et iaculis ligula. Fusce in sapien eget nibh finibus blandit ut non magna. Nullam a lacus sem. Nulla at diam sed lorem finibus efficitur. Donec condimentum erat ut eros consequat porta. In ante nisi, commodo sed urna eget, iaculis tincidunt metus. Quisque lacinia non sapien et feugiat. Cras vel aliquam sem. Aenean at varius neque, quis venenatis erat. Phasellus condimentum tellus diam, in vulputate nibh suscipit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur feugiat consectetur scelerisque. Nunc elementum tempus porta. Aliquam at ligula tristique, sodales lectus eget, mollis sem. Suspendisse potenti. In vel lectus magna. Nulla et nunc consectetur risus dignissim maximus. Quisque quis ex in sapien convallis facilisis. Fusce ut molestie tellus, quis pharetra sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non lectus mauris. In vitae lectus dui. Nam suscipit lobortis ultrices. Vestibulum id massa nec diam feugiat mollis. Ut hendrerit, turpis sed imperdiet euismod, est libero varius sem, sed luctus odio metus non dui. In hac habitasse platea dictumst. Curabitur id metus faucibus, iaculis velit vitae, maximus nulla.
Sed lobortis, sem eu viverra pulvinar, sem ligula porta ante, et luctus mi massa eu nisi. Donec ultrices nisi et dolor vulputate, quis rhoncus lectus pellentesque. Pellentesque scelerisque augue ut sapien tempor sollicitudin. Suspendisse molestie maximus libero, vel dictum tortor ultrices et. Duis non eleifend lacus, nec accumsan eros. Duis mattis eget lorem eu rutrum. Curabitur leo velit, sollicitudin a cursus ullamcorper, vestibulum at dui.
Pellentesque ultricies lacus sed tortor lobortis, a semper ex rhoncus. Sed nisi sapien, viverra vehicula ipsum quis, finibus euismod diam. Sed at dapibus est, semper sollicitudin lectus. Pellentesque porta dapibus dolor, sed laoreet leo maximus consequat. Sed dolor urna, facilisis in laoreet eget, posuere vel libero. In dapibus non lorem at convallis. In nec sagittis odio. Vivamus tempor ipsum vitae venenatis vehicula.
Integer elit risus, rhoncus faucibus varius ac, laoreet vestibulum augue. Fusce porttitor turpis eget sollicitudin euismod. Quisque tempus interdum nisi, ac molestie ex finibus eu. Etiam a dictum orci. Donec et iaculis ligula. Fusce in sapien eget nibh finibus blandit ut non magna. Nullam a lacus sem. Nulla at diam sed lorem finibus efficitur. Donec condimentum erat ut eros consequat porta. In ante nisi, commodo sed urna eget, iaculis tincidunt metus. Quisque lacinia non sapien et feugiat. Cras vel aliquam sem. Aenean at varius neque, quis venenatis erat. Phasellus condimentum tellus diam, in vulputate nibh suscipit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur feugiat consectetur scelerisque. Nunc elementum tempus porta. Aliquam at ligula tristique, sodales lectus eget, mollis sem. Suspendisse potenti. In vel lectus magna. Nulla et nunc consectetur risus dignissim maximus. Quisque quis ex in sapien convallis facilisis. Fusce ut molestie tellus, quis pharetra sapien.
</p>
<div id="footer">
<p id="lang">Learning HTML...</p>
<img class="arrows" src="right-big-color.png">
<img class="inactive arrows" src="left-big-color.png">
</div>
Related
I wonder if it's possible with css to achieve a fixed position clipping mask that cuts out part of a <div>.
Like the below example, except that the .myMask should really be transparent and reveal the layer underneath .myDiv.
Doesn't have to be a sticky topbar, though that should be the easiest case if it's possible at all. But ideally it could be anywhere, fixed to the viewport.
body{
margin: 0;
}
.myMask{
position: sticky;
top: 0px;
height: 50px;
background: white;
z-index: 2;
border: 1px dashed black;
}
.myDiv{
position: relative;
z-index: 1;
background: lightblue;
padding: 10px
}
<div class="myMask"></div>
<div class="myDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum, sem nec interdum accumsan, eros magna porttitor augue, eget porta leo lectus non turpis. Pellentesque eu molestie nisl, at efficitur diam. Aliquam erat volutpat. Nunc in urna tristique nisl hendrerit ullamcorper ut varius lectus. Duis nec sapien semper, cursus enim lacinia, eleifend lacus. Praesent in odio eget tortor pretium laoreet. Praesent sit amet ante quis tellus aliquet interdum ut vitae sem. Aliquam viverra, ligula non consequat maximus, metus quam tincidunt tortor, quis finibus ipsum est sit amet magna. Pellentesque egestas lectus vitae felis mollis, eget ornare ipsum aliquam. Nullam non dui mollis, pulvinar velit vitae, tincidunt leo. Nulla facilisi. Praesent ut tellus eros. Mauris tempor turpis ut lorem pellentesque euismod hendrerit ut velit.
Nam mollis sed nibh et congue. Sed in sagittis elit. Quisque placerat augue vel malesuada fringilla. Donec sit amet faucibus lectus. Fusce faucibus dolor neque, porttitor interdum felis pellentesque malesuada. Nulla elementum dictum elementum. Proin semper, tortor sit amet porttitor consectetur, nisl nibh pellentesque elit, posuere vehicula leo eros vel odio.
Sed in massa faucibus urna vehicula facilisis. Quisque rutrum bibendum libero, quis aliquet urna congue ac. Curabitur aliquet porta aliquam. Sed volutpat hendrerit ligula nec efficitur. Mauris ullamcorper lacinia est, sit amet aliquet nunc efficitur sit amet. Nulla lacinia vehicula urna, quis iaculis leo aliquam quis. Sed feugiat suscipit nunc, et lobortis neque placerat eu. Donec interdum tincidunt tincidunt. Sed metus neque, congue non orci eget, pretium pellentesque tortor. Aenean quis pulvinar mi. Nullam eu nulla purus.
Etiam rhoncus tellus sodales tempus accumsan. Morbi sed feugiat sem, in vestibulum risus. Duis pharetra vulputate dolor, ut posuere lectus vestibulum non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eu placerat neque. Phasellus vel ante eget felis tempus interdum vel ac tortor. Donec et commodo nunc. Nullam maximus elit sed enim dictum, a suscipit ante ultricies. Proin ut mollis lorem, nec sodales eros.
Duis bibendum varius nunc id semper. Cras lacinia elit quis libero dictum accumsan. In hac habitasse platea dictumst. Proin egestas eu leo non hendrerit. Morbi ac ex eu nibh tincidunt pulvinar. Proin sollicitudin dignissim tincidunt. Nullam ultricies metus urna, in varius arcu accumsan sed. Suspendisse elementum urna risus, at tincidunt tortor bibendum sed. Proin dapibus commodo massa, ut eleifend odio hendrerit a. Quisque maximus magna non quam dapibus, in consectetur libero rutrum. Maecenas sed dapibus ante, eu sodales orci. Praesent tincidunt aliquet ligula. Nulla sagittis turpis id dui hendrerit aliquam. Mauris quis erat velit. Vivamus ipsum orci, suscipit in ornare ut, suscipit placerat justo.</div>
One idea is to consider background coloration for the text then we can rely on background-attachment:fixed
Unfortunately the below doesn't work on Firefox due to a known bug
body {
margin: 0;
background:linear-gradient(60deg,red,blue);
}
.myDiv {
background:
linear-gradient(#000,#000), /* color of the text */
linear-gradient(lightblue,lightblue); /* color of the background*/
background-position:0 50px; /* push for background by 50px from the top */
background-repeat:no-repeat; /* don't repeat !!*/
-webkit-background-clip:
text,
padding-box;
background-clip:
text,
padding-box;
background-attachment:fixed; /* make background fixed to scroll */
/* Remove default coloration of text*/
-webkit-text-fill-color: transparent;
color:transparent;
/**/
padding: 60px 10px 10px;
font-size:25px;
}
<div class="myDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum, sem nec interdum accumsan, eros magna porttitor augue, eget porta leo lectus non turpis. Pellentesque eu molestie nisl, at efficitur diam. Aliquam erat volutpat. Nunc in urna tristique
nisl hendrerit ullamcorper ut varius lectus. Duis nec sapien semper, cursus enim lacinia, eleifend lacus. Praesent in odio eget tortor pretium laoreet. Praesent sit amet ante quis tellus aliquet interdum ut vitae sem. Aliquam viverra, ligula non consequat
maximus, metus quam tincidunt tortor, quis finibus ipsum est sit amet magna. Pellentesque egestas lectus vitae felis mollis, eget ornare ipsum aliquam. Nullam non dui mollis, pulvinar velit vitae, tincidunt leo. Nulla facilisi. Praesent ut tellus eros.
Mauris tempor turpis ut lorem pellentesque euismod hendrerit ut velit. Nam mollis sed nibh et congue. Sed in sagittis elit. Quisque placerat augue vel malesuada fringilla. Donec sit amet faucibus lectus. Fusce faucibus dolor neque, porttitor interdum
felis pellentesque malesuada. Nulla elementum dictum elementum. Proin semper, tortor sit amet porttitor consectetur, nisl nibh pellentesque elit, posuere vehicula leo eros vel odio. Sed in massa faucibus urna vehicula facilisis. Quisque rutrum bibendum
libero, quis aliquet urna congue ac. Curabitur aliquet porta aliquam. Sed volutpat hendrerit ligula nec efficitur. Mauris ullamcorper lacinia est, sit amet aliquet nunc efficitur sit amet. Nulla lacinia vehicula urna, quis iaculis leo aliquam quis.
Sed feugiat suscipit nunc, et lobortis neque placerat eu. Donec interdum tincidunt tincidunt. Sed metus neque, congue non orci eget, pretium pellentesque tortor. Aenean quis pulvinar mi. Nullam eu nulla purus. Etiam rhoncus tellus sodales tempus accumsan.
Morbi sed feugiat sem, in vestibulum risus. Duis pharetra vulputate dolor, ut posuere lectus vestibulum non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eu placerat neque. Phasellus vel ante
eget felis tempus interdum vel ac tortor. Donec et commodo nunc. Nullam maximus elit sed enim dictum, a suscipit ante ultricies. Proin ut mollis lorem, nec sodales eros. Duis bibendum varius nunc id semper. Cras lacinia elit quis libero dictum accumsan.
In hac habitasse platea dictumst. Proin egestas eu leo non hendrerit. Morbi ac ex eu nibh tincidunt pulvinar. Proin sollicitudin dignissim tincidunt. Nullam ultricies metus urna, in varius arcu accumsan sed. Suspendisse elementum urna risus, at tincidunt
tortor bibendum sed. Proin dapibus commodo massa, ut eleifend odio hendrerit a. Quisque maximus magna non quam dapibus, in consectetur libero rutrum. Maecenas sed dapibus ante, eu sodales orci. Praesent tincidunt aliquet ligula. Nulla sagittis turpis
id dui hendrerit aliquam. Mauris quis erat velit. Vivamus ipsum orci, suscipit in ornare ut, suscipit placerat justo.</div>
For firefox you can consider another wrapper:
body {
margin: 0;
background:linear-gradient(64deg,red,blue);
}
.myDiv {
background:linear-gradient(lightblue,lightblue);
background-position:0 50px;
background-attachment:fixed;
background-repeat:no-repeat;
padding: 60px 10px 10px;
font-size:25px;
}
.myDiv > div {
background:linear-gradient(#000,#000);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color: transparent;
color:transparent;
background-attachment:inherit;
background-position:inherit;
background-repeat:inherit;
}
<div class="myDiv">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum, sem nec interdum accumsan, eros magna porttitor augue, eget porta leo lectus non turpis. Pellentesque eu molestie nisl, at efficitur diam. Aliquam erat volutpat. Nunc in urna tristique
nisl hendrerit ullamcorper ut varius lectus. Duis nec sapien semper, cursus enim lacinia, eleifend lacus. Praesent in odio eget tortor pretium laoreet. Praesent sit amet ante quis tellus aliquet interdum ut vitae sem. Aliquam viverra, ligula non consequat
maximus, metus quam tincidunt tortor, quis finibus ipsum est sit amet magna. Pellentesque egestas lectus vitae felis mollis, eget ornare ipsum aliquam. Nullam non dui mollis, pulvinar velit vitae, tincidunt leo. Nulla facilisi. Praesent ut tellus eros.
Mauris tempor turpis ut lorem pellentesque euismod hendrerit ut velit. Nam mollis sed nibh et congue. Sed in sagittis elit. Quisque placerat augue vel malesuada fringilla. Donec sit amet faucibus lectus. Fusce faucibus dolor neque, porttitor interdum
felis pellentesque malesuada. Nulla elementum dictum elementum. Proin semper, tortor sit amet porttitor consectetur, nisl nibh pellentesque elit, posuere vehicula leo eros vel odio. Sed in massa faucibus urna vehicula facilisis. Quisque rutrum bibendum
libero, quis aliquet urna congue ac. Curabitur aliquet porta aliquam. Sed volutpat hendrerit ligula nec efficitur. Mauris ullamcorper lacinia est, sit amet aliquet nunc efficitur sit amet. Nulla lacinia vehicula urna, quis iaculis leo aliquam quis.
Sed feugiat suscipit nunc, et lobortis neque placerat eu. Donec interdum tincidunt tincidunt. Sed metus neque, congue non orci eget, pretium pellentesque tortor. Aenean quis pulvinar mi. Nullam eu nulla purus. Etiam rhoncus tellus sodales tempus accumsan.
Morbi sed feugiat sem, in vestibulum risus. Duis pharetra vulputate dolor, ut posuere lectus vestibulum non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eu placerat neque. Phasellus vel ante
eget felis tempus interdum vel ac tortor. Donec et commodo nunc. Nullam maximus elit sed enim dictum, a suscipit ante ultricies. Proin ut mollis lorem, nec sodales eros. Duis bibendum varius nunc id semper. Cras lacinia elit quis libero dictum accumsan.
In hac habitasse platea dictumst. Proin egestas eu leo non hendrerit. Morbi ac ex eu nibh tincidunt pulvinar. Proin sollicitudin dignissim tincidunt. Nullam ultricies metus urna, in varius arcu accumsan sed. Suspendisse elementum urna risus, at tincidunt
tortor bibendum sed. Proin dapibus commodo massa, ut eleifend odio hendrerit a. Quisque maximus magna non quam dapibus, in consectetur libero rutrum. Maecenas sed dapibus ante, eu sodales orci. Praesent tincidunt aliquet ligula. Nulla sagittis turpis
id dui hendrerit aliquam. Mauris quis erat velit. Vivamus ipsum orci, suscipit in ornare ut, suscipit placerat justo.</div></div>
I'm creating an HTML template for DOMPDF need to support multiple pages, but the header and footer doesn't show up on the first page when I have multiple pages.
At the moment;
When I have multiple pages, all pages have Header and Footer correctly except the first (the First page only shows content, page 2,3 and shows content with header and footer).
When I just have one page, the pages shows correctly with header and footer.
<style>
* {
background:transparent;
}
#page {
margin: 0cm 0cm;
background:#000;
margin-top: 190px;
margin-left: 75px;
margin-right: 75px;
margin-bottom: 115px;
position: reletive;
}
header {
position: fixed;
top: -190px;
left: -13px;
z-index:0;
right: 0cm;
}
footer {
position: fixed;
bottom: -115px;
right: 0cm;
left:39px;
z-index:0;
height: 215px;
}
div.content {
float: left;
width: 100%;
}
div {
z-index:10;
background:transparent;
}
</style>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra leo bibendum mi fermentum euismod. Aenean ut augue mauris. Vivamus ultricies euismod malesuada. Praesent mollis eros vel elit ullamcorper, nec viverra justo ultrices. Sed sagittis nisi sit amet convallis placerat. Nam sed dui quis lacus auctor eleifend. Nulla in imperdiet magna, eget dignissim tellus. Quisque placerat nisl a orci tincidunt, sit amet porta nibh dapibus. Vestibulum tortor neque, consequat nec nibh ornare, convallis sagittis ligula. Integer a ex at sapien porttitor volutpat ut in elit.</p>
<p>Fusce nunc orci, posuere sed varius ac, ornare eu orci. Donec consequat pulvinar eleifend. Donec rutrum fringilla dignissim. In consectetur ligula nec pulvinar placerat. Duis interdum accumsan congue. Nulla iaculis magna laoreet dolor tempor, vitae eleifend lectus accumsan. Suspendisse vulputate euismod ante, at blandit tellus auctor a. Sed aliquam lacus eget mi fermentum, vitae maximus elit rhoncus. Nunc vel sagittis orci.v
<p>Quisque fermentum augue in metus laoreet placerat. Nam eget nisi congue, luctus augue quis, ullamcorper est. Nullam eu augue sed dui imperdiet ornare ac interdum lacus. Mauris in viverra lorem. Duis cursus mi quis pellentesque condimentum. Vivamus ut nisl lacus. Phasellus condimentum eros non massa porta rutrum. Proin lacinia ultrices dui ut iaculis. Praesent ut placerat tellus, ac hendrerit mi.</p>
<p>Suspendisse vitae velit maximus, convallis ipsum vel, ornare sem. Curabitur et viverra ligula. Phasellus facilisis neque eu nunc interdum tempor. Mauris tellus lacus, vestibulum sed posuere eu, porttitor non orci. Proin sollicitudin et nisl eget mattis. Donec euismod ipsum quis interdum dictum. Duis facilisis accumsan ultricies. Praesent sollicitudin urna nunc, at auctor odio blandit nec. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean consequat, magna a molestie commodo, mauris lacus congue nisi, quis pellentesque nunc quam in metus. Duis volutpat neque in justo sodales, eget ultricies libero pellentesque.</p>
<p>Curabitur euismod velit turpis, consectetur ornare erat aliquam a. Nulla sagittis commodo varius. Pellentesque tempor, nibh a hendrerit tristique, turpis leo lacinia elit, vitae scelerisque dolor ex ac lectus. Maecenas vulputate dictum erat, quis posuere nisl pellentesque vitae. Nulla auctor volutpat lacus, sed sodales mi porta at. In ut purus augue. Fusce nec nulla non leo finibus pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras viverra id ante sed porttitor. Nam et dolor congue, malesuada enim facilisis, rutrum justo. Etiam quis lectus a tellus mollis placerat. Maecenas interdum tortor faucibus metus tincidunt euismod. Vestibulum laoreet velit quis lobortis interdum. Duis urna quam, vehicula sed ultricies ut, volutpat accumsan libero.</p>
<p>Morbi pulvinar tristique augue, vel pellentesque nisl porta eget. Quisque eu lacinia leo. Nullam ac lacus pretium, suscipit risus quis, volutpat ligula. Morbi vel nisl orci. Suspendisse pharetra tellus euismod ligula tristique, sit amet lacinia nisl ultrices. Curabitur finibus turpis nec metus tempus, non suscipit leo pulvinar. Pellentesque fringilla faucibus massa. Suspendisse commodo egestas tristique. Phasellus tristique vehicula nisl ut consectetur. Aliquam hendrerit augue eu posuere fermentum. Nulla a neque quis ex finibus congue. Vestibulum id condimentum augue. Nulla pretium imperdiet turpis, sit amet cursus urna maximus quis. Praesent dictum, leo nec ultricies fermentum, eros leo maximus felis, in aliquam lectus ligula at mauris. Etiam non ipsum at dui fringilla ullamcorper. Donec sapien lorem, aliquam in lacus at, lacinia pretium velit.</p>
<p>Nulla ultrices rhoncus massa, eu dignissim purus scelerisque ut. Aenean id odio molestie neque tincidunt porttitor. Vivamus eget ultrices lacus. Etiam vitae sagittis orci. Etiam sed ullamcorper eros. Nulla consequat dignissim pretium. Morbi volutpat, quam nec vehicula venenatis, mauris ipsum egestas lacus, nec gravida augue dolor scelerisque enim. Aenean ac pretium ligula. Sed eget dui mi. Morbi et scelerisque diam, ac laoreet tortor. In lobortis, neque vel interdum convallis, elit mauris porta erat, id vestibulum dui nunc porttitor urna. Nulla elementum varius est, a varius mauris hendrerit non. Praesent malesuada ex nisi, sit amet imperdiet mauris vestibulum vel.</p>
<p>Duis at augue ultricies, cursus felis quis, laoreet odio. Ut eget diam neque. Sed a condimentum ex. Donec quis erat eget sem feugiat iaculis ac id dolor. Morbi sit amet convallis neque, mattis egestas nunc. Vestibulum sed laoreet nunc, id viverra nisl. Sed quis ornare erat, vel malesuada sem. Suspendisse vitae hendrerit erat, non maximus metus. Phasellus eget erat ac ipsum placerat vehicula. Aenean in metus pulvinar, posuere enim vitae, imperdiet enim. Aliquam erat volutpat. Donec luctus sapien in malesuada auctor. Donec ullamcorper leo ac sapien vehicula, non iaculis magna pulvinar. Sed tincidunt porta ex sed euismod. Pellentesque consequat tortor lacus, non blandit ex viverra vel. Nam non libero at libero interdum eleifend.</p>
<p>Phasellus in est at nunc cursus luctus eget at ipsum. Vivamus massa sem, auctor quis velit eget, pellentesque pellentesque sapien. Nulla id maximus mauris. Pellentesque consequat tempor mattis. Fusce nec cursus nulla. Fusce vestibulum mauris in erat porttitor vehicula. Nullam pellentesque metus eget ornare auctor. Fusce facilisis risus vitae arcu accumsan efficitur. Vivamus porttitor augue risus, nec venenatis dui imperdiet quis.</p>
<p>Sed et arcu a tellus vulputate dignissim. Pellentesque egestas arcu vel quam auctor sollicitudin. Vestibulum at lacus eu sapien lacinia consequat. Vivamus sed turpis in eros consequat tempor sit amet non purus. Phasellus elementum lacinia metus vel varius. Morbi ut velit augue. Suspendisse rutrum vehicula metus, id faucibus magna. Curabitur magna metus, tempus consequat ex quis, dignissim sollicitudin nibh.</p>
<p>Nulla ultrices rhoncus massa, eu dignissim purus scelerisque ut. Aenean id odio molestie neque tincidunt porttitor. Vivamus eget ultrices lacus. Etiam vitae sagittis orci. Etiam sed ullamcorper eros. Nulla consequat dignissim pretium. Morbi volutpat, quam nec vehicula venenatis, mauris ipsum egestas lacus, nec gravida augue dolor scelerisque enim. Aenean ac pretium ligula. Sed eget dui mi. Morbi et scelerisque diam, ac laoreet tortor. In lobortis, neque vel interdum convallis, elit mauris porta erat, id vestibulum dui nunc porttitor urna. Nulla elementum varius est, a varius mauris hendrerit non. Praesent malesuada ex nisi, sit amet imperdiet mauris vestibulum vel.</p>
<p>Duis at augue ultricies, cursus felis quis, laoreet odio. Ut eget diam neque. Sed a condimentum ex. Donec quis erat eget sem feugiat iaculis ac id dolor. Morbi sit amet convallis neque, mattis egestas nunc. Vestibulum sed laoreet nunc, id viverra nisl. Sed quis ornare erat, vel malesuada sem. Suspendisse vitae hendrerit erat, non maximus metus. Phasellus eget erat ac ipsum placerat vehicula. Aenean in metus pulvinar, posuere enim vitae, imperdiet enim. Aliquam erat volutpat. Donec luctus sapien in malesuada auctor. Donec ullamcorper leo ac sapien vehicula, non iaculis magna pulvinar. Sed tincidunt porta ex sed euismod. Pellentesque consequat tortor lacus, non blandit ex viverra vel. Nam non libero at libero interdum eleifend.</p>
<p>Phasellus in est at nunc cursus luctus eget at ipsum. Vivamus massa sem, auctor quis velit eget, pellentesque pellentesque sapien. Nulla id maximus mauris. Pellentesque consequat tempor mattis. Fusce nec cursus nulla. Fusce vestibulum mauris in erat porttitor vehicula. Nullam pellentesque metus eget ornare auctor. Fusce facilisis risus vitae arcu accumsan efficitur. Vivamus porttitor augue risus, nec venenatis dui imperdiet quis.</p>
<p>Sed et arcu a tellus vulputate dignissim. Pellentesque egestas arcu vel quam auctor sollicitudin. Vestibulum at lacus eu sapien lacinia consequat. Vivamus sed turpis in eros consequat tempor sit amet non purus. Phasellus elementum lacinia metus vel varius. Morbi ut velit augue. Suspendisse rutrum vehicula metus, id faucibus magna. Curabitur magna metus, tempus consequat ex quis, dignissim sollicitudin nibh.</p>
<p>Nulla ultrices rhoncus massa, eu dignissim purus scelerisque ut. Aenean id odio molestie neque tincidunt porttitor. Vivamus eget ultrices lacus. Etiam vitae sagittis orci. Etiam sed ullamcorper eros. Nulla consequat dignissim pretium. Morbi volutpat, quam nec vehicula venenatis, mauris ipsum egestas lacus, nec gravida augue dolor scelerisque enim. Aenean ac pretium ligula. Sed eget dui mi. Morbi et scelerisque diam, ac laoreet tortor. In lobortis, neque vel interdum convallis, elit mauris porta erat, id vestibulum dui nunc porttitor urna. Nulla elementum varius est, a varius mauris hendrerit non. Praesent malesuada ex nisi, sit amet imperdiet mauris vestibulum vel.</p>
<p>Duis at augue ultricies, cursus felis quis, laoreet odio. Ut eget diam neque. Sed a condimentum ex. Donec quis erat eget sem feugiat iaculis ac id dolor. Morbi sit amet convallis neque, mattis egestas nunc. Vestibulum sed laoreet nunc, id viverra nisl. Sed quis ornare erat, vel malesuada sem. Suspendisse vitae hendrerit erat, non maximus metus. Phasellus eget erat ac ipsum placerat vehicula. Aenean in metus pulvinar, posuere enim vitae, imperdiet enim. Aliquam erat volutpat. Donec luctus sapien in malesuada auctor. Donec ullamcorper leo ac sapien vehicula, non iaculis magna pulvinar. Sed tincidunt porta ex sed euismod. Pellentesque consequat tortor lacus, non blandit ex viverra vel. Nam non libero at libero interdum eleifend.</p>
<p>Phasellus in est at nunc cursus luctus eget at ipsum. Vivamus massa sem, auctor quis velit eget, pellentesque pellentesque sapien. Nulla id maximus mauris. Pellentesque consequat tempor mattis. Fusce nec cursus nulla. Fusce vestibulum mauris in erat porttitor vehicula. Nullam pellentesque metus eget ornare auctor. Fusce facilisis risus vitae arcu accumsan efficitur. Vivamus porttitor augue risus, nec venenatis dui imperdiet quis.</p>
<p>Sed et arcu a tellus vulputate dignissim. Pellentesque egestas arcu vel quam auctor sollicitudin. Vestibulum at lacus eu sapien lacinia consequat. Vivamus sed turpis in eros consequat tempor sit amet non purus. Phasellus elementum lacinia metus vel varius. Morbi ut velit augue. Suspendisse rutrum vehicula metus, id faucibus magna. Curabitur magna metus, tempus consequat ex quis, dignissim sollicitudin nibh.</p>
</div>
<footer>
<img src="'.__DIR__.'/bottom.png" alt="" style="width:680px;"/>
</footer>
<header>
<img src="'.__DIR__.'/top.png" alt="" style="margin: 0px 0px 0px 0px; width:732px;"/>
</header>
In dompdf (up to and including version 0.8.3, latest release as of this post) elements are (generally speaking) rendered starting with the page on which they first appear. Because of this you'll want to put any header/footer content at the top of your document.
There is an issue related to this quirk here: https://github.com/dompdf/dompdf/issues/491
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>
Right now, my footer is not in the view port because the height of the content in main is taller than main. I tried the solution suggested here but still couldn't get main to scroll and get footer to show.
.content {
display: grid;
grid-gap: 2px;
height: 100%;
grid-template-areas: "main-settings main";
grid-template-columns: 200px 1fr;
grid-template-rows: 1fr;
width: 100%;
min-height: 0; /* NEW */
min-width: 0; /* NEW; needed for Firefox */
}
Prevent content from expanding grid items
What is the proper fix for this?
Here is a jsfiddle link: https://jsfiddle.net/b8a8ysso/1/
body {
font-size: 15px;
margin: 0;
color: beige;
background-color: rgb(46, 46, 46);
}
.core {
display: grid;
grid-gap: 1px;
height: 100vh;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto auto 0 1fr auto;
grid-template-areas: "header header"
"controls controls"
"carousel carousel"
"nav nav"
"empty empty"
"content content"
"footer footer";
}
.header {
grid-area: header;
display: grid;
justify-content: center;
}
.nav {
grid-area: nav;
}
.content {
grid-area: content;
}
.empty {
grid-area: empty;
}
.carousel {
grid-area: carousel;
}
.controls {
grid-area: controls;
}
.footer {
grid-area: footer;
}
.footer {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #222;
color: #fff;
background-color: #555;
font-size: 0.75rem;
}
.content {
display: grid;
grid-gap: 2px;
grid-template-areas: "main-settings main";
grid-template-columns: 200px 1fr;
grid-template-rows: 1fr;
min-height: 0;
}
.main-settings {
grid-area: main-settings;
}
.main {
grid-area: main;
overflow: auto;
}
<div class="core">
<div class="header">header</div>
<div class="controls">controls</div>
<div class="carousel">carousel</div>
<div class="nav">nav</div>
<div class="empty"></div>
<div class="content">
<div class="main-settings">settings</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae nisi dui. Etiam posuere ultrices urna dignissim tristique. Fusce commodo libero eget tortor commodo egestas. In hac habitasse platea dictumst. Sed congue, purus vitae dignissim convallis,
arcu urna euismod justo, eget congue mi neque posuere nibh. Fusce tristique ex sapien, in posuere nisl faucibus vitae. Ut sed enim accumsan, laoreet orci sed, fringilla urna. Donec blandit sodales lorem, sit amet hendrerit ligula egestas eu. Praesent
congue lectus elit, id ultricies diam auctor id. Suspendisse eget ante at velit cursus cursus molestie vitae nibh. Duis urna sem, convallis vitae justo et, tempor elementum tellus. Donec dignissim nec dolor elementum pharetra. Nullam eleifend venenatis
tortor, et molestie ex ornare ut. Quisque nulla metus, vehicula finibus nisi convallis, pharetra efficitur orci. Ut hendrerit accumsan lacus, volutpat pellentesque odio facilisis ut. In mattis arcu a lacus volutpat, porta interdum nulla dignissim.
Donec aliquet purus elit, quis vulputate quam rhoncus quis. Mauris volutpat pulvinar lectus eu porttitor. Etiam sit amet dui non arcu interdum sagittis. Pellentesque diam libero, fermentum eget efficitur sed, elementum sed eros. Morbi ultricies,
leo sit amet tristique ornare, lectus odio semper elit, eu blandit felis augue a leo. Praesent feugiat, erat eu finibus imperdiet, diam ex elementum risus, id congue est nisl accumsan lectus. Donec ac maximus dui. Pellentesque eu lobortis ipsum.
Donec pulvinar sem non ante pulvinar, vitae varius lacus dictum. Duis bibendum lacus sit amet dui laoreet, eget sodales mauris sollicitudin. Nulla ultricies luctus purus a tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
gravida consequat erat dictum viverra. Aliquam erat volutpat. Duis porttitor sem vehicula nunc lobortis, eu consectetur massa rutrum. In hac habitasse platea dictumst. Phasellus malesuada ullamcorper lectus, sed pretium nisi pulvinar bibendum. Morbi
vestibulum hendrerit magna, non lacinia metus elementum quis. Curabitur interdum lacus libero, ut semper velit efficitur at. Sed hendrerit lobortis est ut congue. In eget mi volutpat, varius diam in, tempus massa. Pellentesque non laoreet lectus.
Suspendisse eu metus ut turpis viverra semper ut eget risus. In iaculis, nibh eget facilisis rutrum, leo urna laoreet sapien, in commodo risus nisl vestibulum massa. Nulla rhoncus volutpat metus. Proin vel massa aliquet, interdum nunc nec, interdum
ex. Curabitur condimentum odio a massa elementum, vitae ullamcorper mauris congue. Etiam semper sapien nisl, a molestie est bibendum quis. Sed elementum quam non feugiat tempus. Nam justo nunc, pulvinar ut risus at, eleifend aliquet tortor. Donec
convallis consequat commodo. Integer urna mi, fermentum vel condimentum a, pellentesque et justo. Proin ultrices arcu metus, nec rutrum nisl scelerisque eu. Morbi ullamcorper luctus eros eu placerat. Donec viverra imperdiet egestas. Nunc feugiat
laoreet odio et suscipit. Cras interdum ante in dictum vehicula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris sagittis pellentesque quam vel convallis. Nullam in purus ut tortor sodales laoreet. Proin consequat aliquam feugiat.
Donec eget dolor eu sem fringilla blandit. Curabitur semper ex ac sem sagittis, in tincidunt neque tincidunt. Ut dignissim erat urna, nec dictum odio pharetra sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae nisi dui.
Etiam posuere ultrices urna dignissim tristique. Fusce commodo libero eget tortor commodo egestas. In hac habitasse platea dictumst. Sed congue, purus vitae dignissim convallis, arcu urna euismod justo, eget congue mi neque posuere nibh. Fusce tristique
ex sapien, in posuere nisl faucibus vitae. Ut sed enim accumsan, laoreet orci sed, fringilla urna. Donec blandit sodales lorem, sit amet hendrerit ligula egestas eu. Praesent congue lectus elit, id ultricies diam auctor id. Suspendisse eget ante
at velit cursus cursus molestie vitae nibh. Duis urna sem, convallis vitae justo et, tempor elementum tellus. Donec dignissim nec dolor elementum pharetra. Nullam eleifend venenatis tortor, et molestie ex ornare ut. Quisque nulla metus, vehicula
finibus nisi convallis, pharetra efficitur orci. Ut hendrerit accumsan lacus, volutpat pellentesque odio facilisis ut. In mattis arcu a lacus volutpat, porta interdum nulla dignissim. Donec aliquet purus elit, quis vulputate quam rhoncus quis. Mauris
volutpat pulvinar lectus eu porttitor. Etiam sit amet dui non arcu interdum sagittis. Pellentesque diam libero, fermentum eget efficitur sed, elementum sed eros. Morbi ultricies, leo sit amet tristique ornare, lectus odio semper elit, eu blandit
felis augue a leo. Praesent feugiat, erat eu finibus imperdiet, diam ex elementum risus, id congue est nisl accumsan lectus. Donec ac maximus dui. Pellentesque eu lobortis ipsum. Donec pulvinar sem non ante pulvinar, vitae varius lacus dictum. Duis
bibendum lacus sit amet dui laoreet, eget sodales mauris sollicitudin. Nulla ultricies luctus purus a tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida consequat erat dictum viverra. Aliquam erat volutpat. Duis porttitor
sem vehicula nunc lobortis, eu consectetur massa rutrum. In hac habitasse platea dictumst. Phasellus malesuada ullamcorper lectus, sed pretium nisi pulvinar bibendum. Morbi vestibulum hendrerit magna, non lacinia metus elementum quis. Curabitur
interdum lacus libero, ut semper velit efficitur at. Sed hendrerit lobortis est ut congue. In eget mi volutpat, varius diam in, tempus massa. Pellentesque non laoreet lectus. Suspendisse eu metus ut turpis viverra semper ut eget risus. In iaculis,
nibh eget facilisis rutrum, leo urna laoreet sapien, in commodo risus nisl vestibulum massa. Nulla rhoncus volutpat metus. Proin vel massa aliquet, interdum nunc nec, interdum ex. Curabitur condimentum odio a massa elementum, vitae ullamcorper mauris
congue. Etiam semper sapien nisl, a molestie est bibendum quis. Sed elementum quam non feugiat tempus. Nam justo nunc, pulvinar ut risus at, eleifend aliquet tortor. Donec convallis consequat commodo. Integer urna mi, fermentum vel condimentum a,
pellentesque et justo. Proin ultrices arcu metus, nec rutrum nisl scelerisque eu. Morbi ullamcorper luctus eros eu placerat. Donec viverra imperdiet egestas. Nunc feugiat laoreet odio et suscipit. Cras interdum ante in dictum vehicula. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Mauris sagittis pellentesque quam vel convallis. Nullam in purus ut tortor sodales laoreet. Proin consequat aliquam feugiat. Donec eget dolor eu sem fringilla blandit. Curabitur semper ex ac sem
sagittis, in tincidunt neque tincidunt. Ut dignissim erat urna, nec dictum odio pharetra sed.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae nisi dui. Etiam posuere ultrices urna dignissim tristique. Fusce commodo libero eget
tortor commodo egestas. In hac habitasse platea dictumst. Sed congue, purus vitae dignissim convallis, arcu urna euismod justo, eget congue mi neque posuere nibh. Fusce tristique ex sapien, in posuere nisl faucibus vitae. Ut sed enim accumsan, laoreet
orci sed, fringilla urna. Donec blandit sodales lorem, sit amet hendrerit ligula egestas eu. Praesent congue lectus elit, id ultricies diam auctor id. Suspendisse eget ante at velit cursus cursus molestie vitae nibh. Duis urna sem, convallis vitae
justo et, tempor elementum tellus. Donec dignissim nec dolor elementum pharetra. Nullam eleifend venenatis tortor, et molestie ex ornare ut. Quisque nulla metus, vehicula finibus nisi convallis, pharetra efficitur orci. Ut hendrerit accumsan lacus,
volutpat pellentesque odio facilisis ut. In mattis arcu a lacus volutpat, porta interdum nulla dignissim. Donec aliquet purus elit, quis vulputate quam rhoncus quis. Mauris volutpat pulvinar lectus eu porttitor. Etiam sit amet dui non arcu interdum
sagittis. Pellentesque diam libero, fermentum eget efficitur sed, elementum sed eros. Morbi ultricies, leo sit amet tristique ornare, lectus odio semper elit, eu blandit felis augue a leo. Praesent feugiat, erat eu finibus imperdiet, diam ex elementum
risus, id congue est nisl accumsan lectus. Donec ac maximus dui. Pellentesque eu lobortis ipsum. Donec pulvinar sem non ante pulvinar, vitae varius lacus dictum. Duis bibendum lacus sit amet dui laoreet, eget sodales mauris sollicitudin. Nulla ultricies
luctus purus a tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida consequat erat dictum viverra. Aliquam erat volutpat. Duis porttitor sem vehicula nunc lobortis, eu consectetur massa rutrum. In hac habitasse platea
dictumst. Phasellus malesuada ullamcorper lectus, sed pretium nisi pulvinar bibendum. Morbi vestibulum hendrerit magna, non lacinia metus elementum quis. Curabitur interdum lacus libero, ut semper velit efficitur at. Sed hendrerit lobortis est ut
congue. In eget mi volutpat, varius diam in, tempus massa. Pellentesque non laoreet lectus. Suspendisse eu metus ut turpis viverra semper ut eget risus. In iaculis, nibh eget facilisis rutrum, leo urna laoreet sapien, in commodo risus nisl vestibulum
massa. Nulla rhoncus volutpat metus. Proin vel massa aliquet, interdum nunc nec, interdum ex. Curabitur condimentum odio a massa elementum, vitae ullamcorper mauris congue. Etiam semper sapien nisl, a molestie est bibendum quis. Sed elementum quam
non feugiat tempus. Nam justo nunc, pulvinar ut risus at, eleifend aliquet tortor. Donec convallis consequat commodo. Integer urna mi, fermentum vel condimentum a, pellentesque et justo. Proin ultrices arcu metus, nec rutrum nisl scelerisque eu.
Morbi ullamcorper luctus eros eu placerat. Donec viverra imperdiet egestas. Nunc feugiat laoreet odio et suscipit. Cras interdum ante in dictum vehicula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris sagittis pellentesque
quam vel convallis. Nullam in purus ut tortor sodales laoreet. Proin consequat aliquam feugiat. Donec eget dolor eu sem fringilla blandit. Curabitur semper ex ac sem sagittis, in tincidunt neque tincidunt. Ut dignissim erat urna, nec dictum odio
pharetra sed.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae nisi dui. Etiam posuere ultrices urna dignissim tristique. Fusce commodo libero eget tortor commodo egestas. In hac habitasse platea dictumst. Sed congue, purus
vitae dignissim convallis, arcu urna euismod justo, eget congue mi neque posuere nibh. Fusce tristique ex sapien, in posuere nisl faucibus vitae. Ut sed enim accumsan, laoreet orci sed, fringilla urna. Donec blandit sodales lorem, sit amet hendrerit
ligula egestas eu. Praesent congue lectus elit, id ultricies diam auctor id. Suspendisse eget ante at velit cursus cursus molestie vitae nibh. Duis urna sem, convallis vitae justo et, tempor elementum tellus. Donec dignissim nec dolor elementum
pharetra. Nullam eleifend venenatis tortor, et molestie ex ornare ut. Quisque nulla metus, vehicula finibus nisi convallis, pharetra efficitur orci. Ut hendrerit accumsan lacus, volutpat pellentesque odio facilisis ut. In mattis arcu a lacus volutpat,
porta interdum nulla dignissim. Donec aliquet purus elit, quis vulputate quam rhoncus quis. Mauris volutpat pulvinar lectus eu porttitor. Etiam sit amet dui non arcu interdum sagittis. Pellentesque diam libero, fermentum eget efficitur sed, elementum
sed eros. Morbi ultricies, leo sit amet tristique ornare, lectus odio semper elit, eu blandit felis augue a leo. Praesent feugiat, erat eu finibus imperdiet, diam ex elementum risus, id congue est nisl accumsan lectus. Donec ac maximus dui. Pellentesque
eu lobortis ipsum. Donec pulvinar sem non ante pulvinar, vitae varius lacus dictum. Duis bibendum lacus sit amet dui laoreet, eget sodales mauris sollicitudin. Nulla ultricies luctus purus a tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Mauris gravida consequat erat dictum viverra. Aliquam erat volutpat. Duis porttitor sem vehicula nunc lobortis, eu consectetur massa rutrum. In hac habitasse platea dictumst. Phasellus malesuada ullamcorper lectus, sed pretium nisi pulvinar
bibendum. Morbi vestibulum hendrerit magna, non lacinia metus elementum quis. Curabitur interdum lacus libero, ut semper velit efficitur at. Sed hendrerit lobortis est ut congue. In eget mi volutpat, varius diam in, tempus massa. Pellentesque non
laoreet lectus. Suspendisse eu metus ut turpis viverra semper ut eget risus. In iaculis, nibh eget facilisis rutrum, leo urna laoreet sapien, in commodo risus nisl vestibulum massa. Nulla rhoncus volutpat metus. Proin vel massa aliquet, interdum
nunc nec, interdum ex. Curabitur condimentum odio a massa elementum, vitae ullamcorper mauris congue. Etiam semper sapien nisl, a molestie est bibendum quis. Sed elementum quam non feugiat tempus. Nam justo nunc, pulvinar ut risus at, eleifend aliquet
tortor. Donec convallis consequat commodo. Integer urna mi, fermentum vel condimentum a, pellentesque et justo. Proin ultrices arcu metus, nec rutrum nisl scelerisque eu. Morbi ullamcorper luctus eros eu placerat. Donec viverra imperdiet egestas.
Nunc feugiat laoreet odio et suscipit. Cras interdum ante in dictum vehicula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris sagittis pellentesque quam vel convallis. Nullam in purus ut tortor sodales laoreet. Proin consequat
aliquam feugiat. Donec eget dolor eu sem fringilla blandit. Curabitur semper ex ac sem sagittis, in tincidunt neque tincidunt. Ut dignissim erat urna, nec dictum odio pharetra sed.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
vitae nisi dui. Etiam posuere ultrices urna dignissim tristique. Fusce commodo libero eget tortor commodo egestas. In hac habitasse platea dictumst. Sed congue, purus vitae dignissim convallis, arcu urna euismod justo, eget congue mi neque posuere
nibh. Fusce tristique ex sapien, in posuere nisl faucibus vitae. Ut sed enim accumsan, laoreet orci sed, fringilla urna. Donec blandit sodales lorem, sit amet hendrerit ligula egestas eu. Praesent congue lectus elit, id ultricies diam auctor id.
Suspendisse eget ante at velit cursus cursus molestie vitae nibh. Duis urna sem, convallis vitae justo et, tempor elementum tellus. Donec dignissim nec dolor elementum pharetra. Nullam eleifend venenatis tortor, et molestie ex ornare ut. Quisque
nulla metus, vehicula finibus nisi convallis, pharetra efficitur orci. Ut hendrerit accumsan lacus, volutpat pellentesque odio facilisis ut. In mattis arcu a lacus volutpat, porta interdum nulla dignissim. Donec aliquet purus elit, quis vulputate
quam rhoncus quis. Mauris volutpat pulvinar lectus eu porttitor. Etiam sit amet dui non arcu interdum sagittis. Pellentesque diam libero, fermentum eget efficitur sed, elementum sed eros. Morbi ultricies, leo sit amet tristique ornare, lectus odio
semper elit, eu blandit felis augue a leo. Praesent feugiat, erat eu finibus imperdiet, diam ex elementum risus, id congue est nisl accumsan lectus. Donec ac maximus dui. Pellentesque eu lobortis ipsum. Donec pulvinar sem non ante pulvinar, vitae
varius lacus dictum. Duis bibendum lacus sit amet dui laoreet, eget sodales mauris sollicitudin. Nulla ultricies luctus purus a tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida consequat erat dictum viverra. Aliquam
erat volutpat. Duis porttitor sem vehicula nunc lobortis, eu consectetur massa rutrum. In hac habitasse platea dictumst. Phasellus malesuada ullamcorper lectus, sed pretium nisi pulvinar bibendum. Morbi vestibulum hendrerit magna, non lacinia metus
elementum quis. Curabitur interdum lacus libero, ut semper velit efficitur at. Sed hendrerit lobortis est ut congue. In eget mi volutpat, varius diam in, tempus massa. Pellentesque non laoreet lectus. Suspendisse eu metus ut turpis viverra semper
ut eget risus. In iaculis, nibh eget facilisis rutrum, leo urna laoreet sapien, in commodo risus nisl vestibulum massa. Nulla rhoncus volutpat metus. Proin vel massa aliquet, interdum nunc nec, interdum ex. Curabitur condimentum odio a massa elementum,
vitae ullamcorper mauris congue. Etiam semper sapien nisl, a molestie est bibendum quis. Sed elementum quam non feugiat tempus. Nam justo nunc, pulvinar ut risus at, eleifend aliquet tortor. Donec convallis consequat commodo. Integer urna mi, fermentum
vel condimentum a, pellentesque et justo. Proin ultrices arcu metus, nec rutrum nisl scelerisque eu. Morbi ullamcorper luctus eros eu placerat. Donec viverra imperdiet egestas. Nunc feugiat laoreet odio et suscipit. Cras interdum ante in dictum
vehicula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris sagittis pellentesque quam vel convallis. Nullam in purus ut tortor sodales laoreet. Proin consequat aliquam feugiat. Donec eget dolor eu sem fringilla blandit. Curabitur
semper ex ac sem sagittis, in tincidunt neque tincidunt. Ut dignissim erat urna, nec dictum odio pharetra sed.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae nisi dui. Etiam posuere ultrices urna dignissim tristique. Fusce
commodo libero eget tortor commodo egestas. In hac habitasse platea dictumst. Sed congue, purus vitae dignissim convallis, arcu urna euismod justo, eget congue mi neque posuere nibh. Fusce tristique ex sapien, in posuere nisl faucibus vitae. Ut
sed enim accumsan, laoreet orci sed, fringilla urna. Donec blandit sodales lorem, sit amet hendrerit ligula egestas eu. Praesent congue lectus elit, id ultricies diam auctor id. Suspendisse eget ante at velit cursus cursus molestie vitae nibh. Duis
urna sem, convallis vitae justo et, tempor elementum tellus. Donec dignissim nec dolor elementum pharetra. Nullam eleifend venenatis tortor, et molestie ex ornare ut. Quisque nulla metus, vehicula finibus nisi convallis, pharetra efficitur orci.
Ut hendrerit accumsan lacus, volutpat pellentesque odio facilisis ut. In mattis arcu a lacus volutpat, porta interdum nulla dignissim. Donec aliquet purus elit, quis vulputate quam rhoncus quis. Mauris volutpat pulvinar lectus eu porttitor. Etiam
sit amet dui non arcu interdum sagittis. Pellentesque diam libero, fermentum eget efficitur sed, elementum sed eros. Morbi ultricies, leo sit amet tristique ornare, lectus odio semper elit, eu blandit felis augue a leo. Praesent feugiat, erat eu
finibus imperdiet, diam ex elementum risus, id congue est nisl accumsan lectus. Donec ac maximus dui. Pellentesque eu lobortis ipsum. Donec pulvinar sem non ante pulvinar, vitae varius lacus dictum. Duis bibendum lacus sit amet dui laoreet, eget
sodales mauris sollicitudin. Nulla ultricies luctus purus a tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida consequat erat dictum viverra. Aliquam erat volutpat. Duis porttitor sem vehicula nunc lobortis, eu consectetur
massa rutrum. In hac habitasse platea dictumst. Phasellus malesuada ullamcorper lectus, sed pretium nisi pulvinar bibendum. Morbi vestibulum hendrerit magna, non lacinia metus elementum quis. Curabitur interdum lacus libero, ut semper velit efficitur
at. Sed hendrerit lobortis est ut congue. In eget mi volutpat, varius diam in, tempus massa. Pellentesque non laoreet lectus. Suspendisse eu metus ut turpis viverra semper ut eget risus. In iaculis, nibh eget facilisis rutrum, leo urna laoreet sapien,
in commodo risus nisl vestibulum massa. Nulla rhoncus volutpat metus. Proin vel massa aliquet, interdum nunc nec, interdum ex. Curabitur condimentum odio a massa elementum, vitae ullamcorper mauris congue. Etiam semper sapien nisl, a molestie est
bibendum quis. Sed elementum quam non feugiat tempus. Nam justo nunc, pulvinar ut risus at, eleifend aliquet tortor. Donec convallis consequat commodo. Integer urna mi, fermentum vel condimentum a, pellentesque et justo. Proin ultrices arcu metus,
nec rutrum nisl scelerisque eu. Morbi ullamcorper luctus eros eu placerat. Donec viverra imperdiet egestas. Nunc feugiat laoreet odio et suscipit. Cras interdum ante in dictum vehicula. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Mauris sagittis pellentesque quam vel convallis. Nullam in purus ut tortor sodales laoreet. Proin consequat aliquam feugiat. Donec eget dolor eu sem fringilla blandit. Curabitur semper ex ac sem sagittis, in tincidunt neque tincidunt. Ut dignissim
erat urna, nec dictum odio pharetra sed.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae nisi dui. Etiam posuere ultrices urna dignissim tristique. Fusce commodo libero eget tortor commodo egestas. In hac habitasse platea dictumst.
Sed congue, purus vitae dignissim convallis, arcu urna euismod justo, eget congue mi neque posuere nibh. Fusce tristique ex sapien, in posuere nisl faucibus vitae. Ut sed enim accumsan, laoreet orci sed, fringilla urna. Donec blandit sodales lorem,
sit amet hendrerit ligula egestas eu. Praesent congue lectus elit, id ultricies diam auctor id. Suspendisse eget ante at velit cursus cursus molestie vitae nibh. Duis urna sem, convallis vitae justo et, tempor elementum tellus. Donec dignissim nec
dolor elementum pharetra. Nullam eleifend venenatis tortor, et molestie ex ornare ut. Quisque nulla metus, vehicula finibus nisi convallis, pharetra efficitur orci. Ut hendrerit accumsan lacus, volutpat pellentesque odio facilisis ut. In mattis
arcu a lacus volutpat, porta interdum nulla dignissim. Donec aliquet purus elit, quis vulputate quam rhoncus quis. Mauris volutpat pulvinar lectus eu porttitor. Etiam sit amet dui non arcu interdum sagittis. Pellentesque diam libero, fermentum eget
efficitur sed, elementum sed eros. Morbi ultricies, leo sit amet tristique ornare, lectus odio semper elit, eu blandit felis augue a leo. Praesent feugiat, erat eu finibus imperdiet, diam ex elementum risus, id congue est nisl accumsan lectus. Donec
</div>
</div>
<div class="footer">footer</div>
</div>
https://jsfiddle.net/b8a8ysso/2/
Its because you have overflow: hidden; set on your body.
According to the docs:
hidden
Content is clipped if necessary to fit the padding box. No scrollbars are provided.
If you want a scrollbar, use overflow: scroll or you can just remove the property entirely.
Hello i'm trying to find the best way of keeping my skewed elements in place whist resizing page.
I want to be able to extend the content area (green area) and keep that the same shape but also have the white corners the same shape as well.
Sorry for my lack of knowledge in this area, i'm currently still learning this
I will accept JavaScript or JQuery solutions.
Here is an example what I have so far:
/* Latest compiled and minified CSS included as External Resource*/
.container-fluid{
background: green;
padding: 0px;
color: black;
position: relative;
}
.container{
padding: 50px;
}
.overlay-top-right {
position: absolute;
right: 0;
top: 0;
height: 300px;
width: 30%;
background: #ffffff;
transform-origin: top right;
-ms-transform: skew(45deg,0deg);
-webkit-transform: skew(45deg,0deg);
transform: skew(45deg,0deg);
}
.overlay-bottom-left {
position: absolute;
left: 0;
bottom: 0;
height: 300px;
width: 40%;
background: #ffffff;
transform-origin: bottom left;
-ms-transform: skew(45deg,0deg);
-webkit-transform: skew(45deg,0deg);
transform: skew(45deg,0deg);
}
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
<div class="container-fluid">
<div class="overlay-top-right"></div>
<div class="overlay-bottom-left"></div>
<div class="container">
<div class="row">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempus arcu a nisl bibendum interdum sed in velit. Etiam semper sem ac nisl rhoncus, at molestie lectus laoreet. Phasellus pulvinar libero mi, a aliquet felis condimentum ut. Morbi massa libero, finibus vitae pellentesque vitae, dignissim sed purus. Ut volutpat consequat commodo. Praesent consequat eget mauris sed viverra. Etiam ac dui vel turpis rutrum tincidunt eu vitae orci. Nunc rhoncus molestie eros nec aliquet. Vestibulum et blandit orci, vitae molestie massa. Morbi hendrerit orci ac interdum tincidunt. Nulla facilisi. Nulla blandit purus eget mattis eleifend. Etiam blandit, enim vel porttitor mollis, diam massa suscipit metus, ut ornare tellus arcu nec orci.
Pellentesque bibendum dignissim tincidunt. Morbi vel sem lacus. Cras vitae laoreet eros. Aenean hendrerit ante semper, auctor ligula et, interdum sapien. Duis placerat urna at velit tincidunt commodo. Fusce condimentum mauris ut ornare euismod. Duis iaculis, augue in varius pretium, justo ligula volutpat est, et ornare dui nibh a sem. Quisque sit amet ultricies tortor.
Praesent egestas tincidunt massa convallis elementum. Fusce ac nisl sed arcu placerat commodo ut a lacus. Donec eget blandit lacus. Vivamus ac efficitur nunc. Nulla facilisi. Phasellus vel ipsum tempus, imperdiet dolor quis, rhoncus magna. Duis lobortis, nisl non lobortis faucibus, risus metus ullamcorper mauris, a ultricies quam nibh vitae sapien. Nulla facilisi. Donec luctus in libero vel pharetra. Maecenas mollis quam libero, eget pellentesque risus convallis at. Morbi laoreet vitae urna id accumsan. Etiam eu porttitor dolor. Curabitur eu sagittis augue. Phasellus at laoreet lacus. Donec interdum aliquet consectetur.
Etiam vestibulum sapien in metus iaculis bibendum. Fusce aliquet sodales leo, et interdum nisl gravida non. Quisque eget lobortis metus, ac euismod ipsum. Cras ac gravida purus. Integer erat orci, feugiat eget tortor sit amet, semper fringilla tortor. Duis luctus at magna sodales efficitur. Donec enim nulla, tempor vel dictum nec, porta vel dolor. Vivamus semper dui tortor. Curabitur turpis mi, mollis a sodales sodales, feugiat eu nisi. Pellentesque non fringilla nisl. Donec at dapibus libero, sed tempor arcu. Pellentesque velit ante, interdum in orci at, feugiat viverra orci. Quisque egestas a tortor et ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ut nunc tempor, dictum orci eu, pharetra enim.
Sed accumsan sem ipsum. Integer id dolor quis massa tempor congue ac ut nisi. Pellentesque nulla lectus, efficitur non sagittis quis, ornare vel nisl. Proin tempor ullamcorper turpis, et hendrerit est fermentum rutrum. Ut ligula nisi, varius quis sodales at, euismod et diam. Mauris vel sem a mi eleifend fringilla. Suspendisse magna magna, lacinia sit amet nisl eu, laoreet ultricies erat. Suspendisse non orci ante. Aliquam interdum ac lacus eget ornare. Vestibulum dictum felis vitae hendrerit interdum. Duis quis tempus urna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempus arcu a nisl bibendum interdum sed in velit. Etiam semper sem ac nisl rhoncus, at molestie lectus laoreet. Phasellus pulvinar libero mi, a aliquet felis condimentum ut. Morbi massa libero, finibus vitae pellentesque vitae, dignissim sed purus. Ut volutpat consequat commodo. Praesent consequat eget mauris sed viverra. Etiam ac dui vel turpis rutrum tincidunt eu vitae orci. Nunc rhoncus molestie eros nec aliquet. Vestibulum et blandit orci, vitae molestie massa. Morbi hendrerit orci ac interdum tincidunt. Nulla facilisi. Nulla blandit purus eget mattis eleifend. Etiam blandit, enim vel porttitor mollis, diam massa suscipit metus, ut ornare tellus arcu nec orci.
Pellentesque bibendum dignissim tincidunt. Morbi vel sem lacus. Cras vitae laoreet eros. Aenean hendrerit ante semper, auctor ligula et, interdum sapien. Duis placerat urna at velit tincidunt commodo. Fusce condimentum mauris ut ornare euismod. Duis iaculis, augue in varius pretium, justo ligula volutpat est, et ornare dui nibh a sem. Quisque sit amet ultricies tortor.
Praesent egestas tincidunt massa convallis elementum. Fusce ac nisl sed arcu placerat commodo ut a lacus. Donec eget blandit lacus. Vivamus ac efficitur nunc. Nulla facilisi. Phasellus vel ipsum tempus, imperdiet dolor quis, rhoncus magna. Duis lobortis, nisl non lobortis faucibus, risus metus ullamcorper mauris, a ultricies quam nibh vitae sapien. Nulla facilisi. Donec luctus in libero vel pharetra. Maecenas mollis quam libero, eget pellentesque risus convallis at. Morbi laoreet vitae urna id accumsan. Etiam eu porttitor dolor. Curabitur eu sagittis augue. Phasellus at laoreet lacus. Donec interdum aliquet consectetur.
Etiam vestibulum sapien in metus iaculis bibendum. Fusce aliquet sodales leo, et interdum nisl gravida non. Quisque eget lobortis metus, ac euismod ipsum. Cras ac gravida purus. Integer erat orci, feugiat eget tortor sit amet, semper fringilla tortor. Duis luctus at magna sodales efficitur. Donec enim nulla, tempor vel dictum nec, porta vel dolor. Vivamus semper dui tortor. Curabitur turpis mi, mollis a sodales sodales, feugiat eu nisi. Pellentesque non fringilla nisl. Donec at dapibus libero, sed tempor arcu. Pellentesque velit ante, interdum in orci at, feugiat viverra orci. Quisque egestas a tortor et ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ut nunc tempor, dictum orci eu, pharetra enim.
Sed accumsan sem ipsum. Integer id dolor quis massa tempor congue ac ut nisi. Pellentesque nulla lectus, efficitur non sagittis quis, ornare vel nisl. Proin tempor ullamcorper turpis, et hendrerit est fermentum rutrum. Ut ligula nisi, varius quis sodales at, euismod et diam. Mauris vel sem a mi eleifend fringilla. Suspendisse magna magna, lacinia sit amet nisl eu, laoreet ultricies erat. Suspendisse non orci ante. Aliquam interdum ac lacus eget ornare. Vestibulum dictum felis vitae hendrerit interdum. Duis quis tempus urna.
</div>
</div>
</div>
You may replace your elements by :before and :after on the text area and use floating like this:
/* Latest compiled and minified CSS included as External Resource*/
.container-fluid{
background: green;
padding: 0px;
color: black;
position: relative;
}
.container{
padding: 50px;
overflow:hidden;
}
.overlay {
position:relative;
}
.overlay:before {
content:" ";
float:right;
margin-right: -50px;
margin-top: -50px;
height: 150px;
width: 150px;
background: #ffffff;
transform-origin: top right;
-ms-transform: skew(45deg,0deg);
-webkit-transform: skew(45deg,0deg);
transform: skew(45deg,0deg);
}
.overlay:after {
content:" ";
float:left;
position:relative;
margin-left: -50px;
margin-bottom: -50px;
height: 100px;
width: 100px;
background: #ffffff;
transform-origin: bottom left;
-ms-transform: skew(45deg,0deg);
-webkit-transform: skew(45deg,0deg);
transform: skew(45deg,0deg);
}
/* Optional theme */
<div class="container-fluid">
<div class="container">
<div class="row overlay">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempus arcu a nisl bibendum interdum sed in velit. Etiam semper sem ac nisl rhoncus, at molestie lectus laoreet. Phasellus pulvinar libero mi, a aliquet felis condimentum ut. Morbi massa libero, finibus vitae pellentesque vitae, dignissim sed purus. Ut volutpat consequat commodo. Praesent consequat eget mauris sed viverra. Etiam ac dui vel turpis rutrum tincidunt eu vitae orci. Nunc rhoncus molestie eros nec aliquet. Vestibulum et blandit orci, vitae molestie massa. Morbi hendrerit orci ac interdum tincidunt. Nulla facilisi. Nulla blandit purus eget mattis eleifend. Etiam blandit, enim vel porttitor mollis, diam massa suscipit metus, ut ornare tellus arcu nec orci.
Pellentesque bibendum dignissim tincidunt. Morbi vel sem lacus. Cras vitae laoreet eros. Aenean hendrerit ante semper, auctor ligula et, interdum sapien. Duis placerat urna at velit tincidunt commodo. Fusce condimentum mauris ut ornare euismod. Duis iaculis, augue in varius pretium, justo ligula volutpat est, et ornare dui nibh a sem. Quisque sit amet ultricies tortor.
Praesent egestas tincidunt massa convallis elementum. Fusce ac nisl sed arcu placerat commodo ut a lacus. Donec eget blandit lacus. Vivamus ac efficitur nunc. Nulla facilisi. Phasellus vel ipsum tempus, imperdiet dolor quis, rhoncus magna. Duis lobortis, nisl non lobortis faucibus, risus metus ullamcorper mauris, a ultricies quam nibh vitae sapien. Nulla facilisi. Donec luctus in libero vel pharetra. Maecenas mollis quam libero, eget pellentesque risus convallis at. Morbi laoreet vitae urna id accumsan. Etiam eu porttitor dolor. Curabitur eu sagittis augue. Phasellus at laoreet lacus. Donec interdum aliquet consectetur.
Etiam vestibulum sapien in metus iaculis bibendum. Fusce aliquet sodales leo, et interdum nisl gravida non. Quisque eget lobortis metus, ac euismod ipsum. Cras ac gravida purus. Integer erat orci, feugiat eget tortor sit amet, semper fringilla tortor. Duis luctus at magna sodales efficitur. Donec enim nulla, tempor vel dictum nec, porta vel dolor. Vivamus semper dui tortor. Curabitur turpis mi, mollis a sodales sodales, feugiat eu nisi. Pellentesque non fringilla nisl. Donec at dapibus libero, sed tempor arcu. Pellentesque velit ante, interdum in orci at, feugiat viverra orci. Quisque egestas a tortor et ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ut nunc tempor, dictum orci eu, pharetra enim.
Sed accumsan sem ipsum. Integer id dolor quis massa tempor congue ac ut nisi. Pellentesque nulla lectus, efficitur non sagittis quis, ornare vel nisl. Proin tempor ullamcorper turpis, et hendrerit est fermentum rutrum. Ut ligula nisi, varius quis sodales at, euismod et diam. Mauris vel sem a mi eleifend fringilla. Suspendisse magna magna, lacinia sit amet nisl eu, laoreet ultricies erat. Suspendisse non orci ante. Aliquam interdum ac lacus eget ornare. Vestibulum dictum felis vitae hendrerit interdum. Duis quis tempus urna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempus arcu a nisl bibendum interdum sed in velit. Etiam semper sem ac nisl rhoncus, at molestie lectus laoreet. Phasellus pulvinar libero mi, a aliquet felis condimentum ut. Morbi massa libero, finibus vitae pellentesque vitae, dignissim sed purus. Ut volutpat consequat commodo. Praesent consequat eget mauris sed viverra. Etiam ac dui vel turpis rutrum tincidunt eu vitae orci. Nunc rhoncus molestie eros nec aliquet. Vestibulum et blandit orci, vitae molestie massa. Morbi hendrerit orci ac interdum tincidunt. Nulla facilisi. Nulla blandit purus eget mattis eleifend. Etiam blandit, enim vel porttitor mollis, diam massa suscipit metus, ut ornare tellus arcu nec orci.
Pellentesque bibendum dignissim tincidunt. Morbi vel sem lacus. Cras vitae laoreet eros. Aenean hendrerit ante semper, auctor ligula et, interdum sapien. Duis placerat urna at velit tincidunt commodo. Fusce condimentum mauris ut ornare euismod. Duis iaculis, augue in varius pretium, justo ligula volutpat est, et ornare dui nibh a sem. Quisque sit amet ultricies tortor.
Praesent egestas tincidunt massa convallis elementum. Fusce ac nisl sed arcu placerat commodo ut a lacus. Donec eget blandit lacus. Vivamus ac efficitur nunc. Nulla facilisi. Phasellus vel ipsum tempus, imperdiet dolor quis, rhoncus magna. Duis lobortis, nisl non lobortis faucibus, risus metus ullamcorper mauris, a ultricies quam nibh vitae sapien. Nulla facilisi. Donec luctus in libero vel pharetra. Maecenas mollis quam libero, eget pellentesque risus convallis at. Morbi laoreet vitae urna id accumsan. Etiam eu porttitor dolor. Curabitur eu sagittis augue. Phasellus at laoreet lacus. Donec interdum aliquet consectetur.
Etiam vestibulum sapien in metus iaculis bibendum. Fusce aliquet sodales leo, et interdum nisl gravida non. Quisque eget lobortis metus, ac euismod ipsum. Cras ac gravida purus. Integer erat orci, feugiat eget tortor sit amet, semper fringilla tortor. Duis luctus at magna sodales efficitur. Donec enim nulla, tempor vel dictum nec, porta vel dolor. Vivamus semper dui tortor. Curabitur turpis mi, mollis a sodales sodales, feugiat eu nisi. Pellentesque non fringilla nisl. Donec at dapibus libero, sed tempor arcu. Pellentesque velit ante, interdum in orci at, feugiat viverra orci. Quisque egestas a tortor et ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ut nunc tempor, dictum orci eu, pharetra enim.
Sed accumsan sem ipsum. Integer id dolor quis massa tempor congue ac ut nisi. Pellentesque nulla lectus, efficitur non sagittis quis, ornare vel nisl. Proin tempor ullamcorper turpis, et hendrerit est fermentum rutrum. Ut ligula nisi, varius quis sodales at, euismod et diam. Mauris vel sem a mi eleifend fringilla. Suspendisse magna magna, lacinia sit amet nisl eu, laoreet ultricies erat. Suspendisse non orci ante. Aliquam interdum ac lacus eget ornare. Vestibulum dictum felis vitae hendrerit interdum. Duis quis tempus urna.
</div>
</div>
</div>