Flexbox children don't fill height and text overflows - html
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>
Related
Overlay Column Outline - Fixed While Scrolling
I'm trying to implement something similar to the website d-esk.net, where there is a viewport window that is kept in place while you scroll, allowing the scrolled content to go below said window. The contents of the site are kept within the borders of this window. What would be the best way to go about this?
I tried messing around with [grid-col] { border: 1px solid black; } and [grid-row] { border: 1px solid black; } but I haven't had any luck.
I'm a beginner to html and CSS so any help is appreciated, resources for research would be welcome.
Thanks so much!
The frame has a position fixed:
html, body {
width: 100%;
}
body {
text-align: center;
}
.frame {
height: 80%;
width: 70%;
border: 1px solid black;
position: fixed;
top: 10%;
left: 15%;
}
.container {
width: 70%;
margin: 0 auto;
padding: 20px;
text-align: justify;
box-sizing: border-box;
}
<div class="frame"></div>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis augue a nibh accumsan aliquam. Suspendisse gravida leo arcu, sed interdum turpis venenatis eget. In mattis, magna ut congue pretium, turpis neque faucibus sapien, consectetur dapibus turpis erat in mi. Mauris vestibulum non felis eget pretium. Donec imperdiet dapibus fringilla. Sed congue euismod ultricies. Sed malesuada, enim sed lacinia vehicula, arcu elit tempor nulla, id hendrerit magna elit vel nibh. Sed suscipit mi id enim suscipit dictum id vel turpis. Nulla sapien neque, posuere sit amet egestas sed, ornare condimentum ipsum. Nulla molestie placerat quam, porttitor vestibulum ipsum vestibulum sed. Proin in porttitor mauris. Nunc a placerat felis. Vivamus laoreet viverra purus sed finibus. Nulla facilisi. Sed varius diam erat, eget pharetra orci laoreet vitae. </p>
<p>Cras dignissim elit et lacus pellentesque semper. Quisque in odio convallis, scelerisque turpis ac, gravida justo. Pellentesque nec ex tristique, pretium neque ut, iaculis orci. Phasellus velit tortor, ullamcorper ac massa id, euismod ultricies metus. Sed a ultricies mauris. Nulla facilisi. Maecenas posuere augue lacus, ut accumsan mi placerat a. Ut vel nibh sed nunc tincidunt feugiat. Sed auctor urna metus, luctus elementum ipsum condimentum vitae. Donec pretium viverra auctor. Quisque commodo finibus molestie. Nulla vel congue nisi, vel commodo ipsum. Aliquam vel dui non eros consectetur elementum non ut elit. Curabitur auctor ipsum a mi tincidunt, in commodo erat convallis. </p>
<p>Duis vestibulum est ut libero iaculis bibendum. In est turpis, iaculis eget venenatis in, convallis vitae turpis. Curabitur in urna sollicitudin, porttitor metus a, vulputate turpis. Praesent facilisis at risus id tempus. Suspendisse efficitur maximus ex, ut aliquet sem convallis ac. Phasellus mollis, metus at rutrum ullamcorper, massa nunc suscipit enim, quis sodales libero nibh varius leo. Mauris venenatis lorem diam, vitae scelerisque magna varius nec. Donec rutrum enim at mi laoreet, et vulputate mi lobortis. Phasellus ac dui at lacus tincidunt bibendum. Donec et metus sed lacus pellentesque fermentum non id sapien. Fusce vulputate, odio eu ullamcorper convallis, quam est dictum libero, a convallis metus orci a arcu. Cras pharetra ipsum dignissim odio elementum, sed pellentesque diam condimentum. Aenean et ligula lectus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis augue a nibh accumsan aliquam. Suspendisse gravida leo arcu, sed interdum turpis venenatis eget. In mattis, magna ut congue pretium, turpis neque faucibus sapien, consectetur dapibus turpis erat in mi. Mauris vestibulum non felis eget pretium. Donec imperdiet dapibus fringilla. Sed congue euismod ultricies. Sed malesuada, enim sed lacinia vehicula, arcu elit tempor nulla, id hendrerit magna elit vel nibh. Sed suscipit mi id enim suscipit dictum id vel turpis. Nulla sapien neque, posuere sit amet egestas sed, ornare condimentum ipsum. Nulla molestie placerat quam, porttitor vestibulum ipsum vestibulum sed. Proin in porttitor mauris. Nunc a placerat felis. Vivamus laoreet viverra purus sed finibus. Nulla facilisi. Sed varius diam erat, eget pharetra orci laoreet vitae. </p>
<p>Cras dignissim elit et lacus pellentesque semper. Quisque in odio convallis, scelerisque turpis ac, gravida justo. Pellentesque nec ex tristique, pretium neque ut, iaculis orci. Phasellus velit tortor, ullamcorper ac massa id, euismod ultricies metus. Sed a ultricies mauris. Nulla facilisi. Maecenas posuere augue lacus, ut accumsan mi placerat a. Ut vel nibh sed nunc tincidunt feugiat. Sed auctor urna metus, luctus elementum ipsum condimentum vitae. Donec pretium viverra auctor. Quisque commodo finibus molestie. Nulla vel congue nisi, vel commodo ipsum. Aliquam vel dui non eros consectetur elementum non ut elit. Curabitur auctor ipsum a mi tincidunt, in commodo erat convallis. </p>
<p>Duis vestibulum est ut libero iaculis bibendum. In est turpis, iaculis eget venenatis in, convallis vitae turpis. Curabitur in urna sollicitudin, porttitor metus a, vulputate turpis. Praesent facilisis at risus id tempus. Suspendisse efficitur maximus ex, ut aliquet sem convallis ac. Phasellus mollis, metus at rutrum ullamcorper, massa nunc suscipit enim, quis sodales libero nibh varius leo. Mauris venenatis lorem diam, vitae scelerisque magna varius nec. Donec rutrum enim at mi laoreet, et vulputate mi lobortis. Phasellus ac dui at lacus tincidunt bibendum. Donec et metus sed lacus pellentesque fermentum non id sapien. Fusce vulputate, odio eu ullamcorper convallis, quam est dictum libero, a convallis metus orci a arcu. Cras pharetra ipsum dignissim odio elementum, sed pellentesque diam condimentum. Aenean et ligula lectus. </p>
</div>
How to fixed footer at the bottom of the page? [duplicate]
This question already has answers here: Make div stay at bottom of page's content all the time even when there are scrollbars (12 answers) Closed 1 year ago. Here is my code, i want my footer to be static at the bottom of my html page, how can i fixed it ? <footer class="footer"> <div> </div> <div class="footer_container"> <%= link_to "About Us", '#' %> <%= link_to "Contact Us", '#' %> </div> </footer>
just write this css:
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%; // <- this is optional
}
here is the reference
Add .footer Class
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
<h2>Footer Example</h2>
<div class="footer">
<div>
</div>
<div class="footer_container">
<ul class="navigation">
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
/* Height of the footer */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
/* Height of the footer */
background: #6cf;
}
<div id="container">
<div id="header">This is header</div>
<div id="body">
<h1>This is body DUMMY TEXT</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At varius vel pharetra vel turpis nunc. Accumsan sit amet nulla facilisi. Molestie at elementum eu facilisis sed odio. Vitae
sapien pellentesque habitant morbi tristique senectus et. Lobortis scelerisque fermentum dui faucibus. Nunc scelerisque viverra mauris in aliquam sem. Congue mauris rhoncus aenean vel elit scelerisque mauris. Laoreet id donec ultrices tincidunt
arcu non sodales neque sodales. Velit aliquet sagittis id consectetur purus ut faucibus. Ipsum nunc aliquet bibendum enim facilisis gravida. Gravida in fermentum et sollicitudin ac orci phasellus. Tortor vitae purus faucibus ornare suspendisse sed
nisi. Faucibus pulvinar elementum integer enim neque volutpat. Venenatis cras sed felis eget velit. Velit egestas dui id ornare. Tempus iaculis urna id volutpat. In hac habitasse platea dictumst. Viverra maecenas accumsan lacus vel facilisis volutpat.
Enim praesent elementum facilisis leo. Ut tristique et egestas quis. Id interdum velit laoreet id donec ultrices tincidunt arcu. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim. Sit amet consectetur adipiscing elit duis tristique
sollicitudin nibh sit. Nec dui nunc mattis enim ut tellus. Adipiscing vitae proin sagittis nisl rhoncus. Bibendum est ultricies integer quis auctor. Egestas tellus rutrum tellus pellentesque eu tincidunt. Sagittis id consectetur purus ut faucibus
pulvinar elementum. Feugiat pretium nibh ipsum consequat nisl vel. Integer malesuada nunc vel risus. Tortor id aliquet lectus proin nibh nisl. Ante metus dictum at tempor commodo ullamcorper a. Enim blandit volutpat maecenas volutpat blandit aliquam
etiam erat. Morbi blandit cursus risus at ultrices mi. Netus et malesuada fames ac turpis egestas. Sed augue lacus viverra vitae congue. Cursus risus at ultrices mi. Libero enim sed faucibus turpis in eu mi bibendum neque. Vulputate dignissim suspendisse
in est ante in nibh mauris cursus. Ultricies mi quis hendrerit dolor magna eget. Cras adipiscing enim eu turpis egestas pretium aenean pharetra. Mattis ullamcorper velit sed ullamcorper morbi. Vel risus commodo viverra maecenas accumsan lacus vel.
Posuere urna nec tincidunt praesent semper feugiat nibh sed. Hendrerit gravida rutrum quisque non tellus orci. In nulla posuere sollicitudin aliquam ultrices sagittis orci. Eget mauris pharetra et ultrices neque ornare. Commodo ullamcorper a lacus
vestibulum. Ligula ullamcorper malesuada proin libero nunc consequat. Augue eget arcu dictum varius duis at consectetur lorem. Felis imperdiet proin fermentum leo vel orci porta. Et netus et malesuada fames ac. Tincidunt augue interdum velit euismod
in. Auctor neque vitae tempus quam pellentesque nec nam aliquam. Enim neque volutpat ac tincidunt vitae semper quis lectus nulla. Semper viverra nam libero justo laoreet sit amet cursus sit. Quis risus sed vulputate odio. Non curabitur gravida arcu
ac tortor. Pellentesque eu tincidunt tortor aliquam nulla. Dui sapien eget mi proin sed libero enim sed faucibus. Adipiscing elit duis tristique sollicitudin. Enim lobortis scelerisque fermentum dui faucibus. Ac placerat vestibulum lectus mauris
ultrices eros in cursus turpis. Congue eu consequat ac felis donec. Diam maecenas sed enim ut sem viverra. Id cursus metus aliquam eleifend mi in nulla posuere sollicitudin. Nibh venenatis cras sed felis eget velit aliquet sagittis id. Risus at
ultrices mi tempus imperdiet nulla. Vel eros donec ac odio tempor orci dapibus ultrices in. Nisl condimentum id venenatis a condimentum vitae. Amet est placerat in egestas erat. Aliquet nec ullamcorper sit amet. Odio facilisis mauris sit amet massa.
Velit aliquet sagittis id consectetur. Leo integer malesuada nunc vel. In ornare quam viverra orci. Tristique senectus et netus et malesuada. Sit amet purus gravida quis blandit turpis cursus in. Bibendum arcu vitae elementum curabitur vitae. Ultrices
gravida dictum fusce ut. Tellus rutrum tellus pellentesque eu. Sit amet luctus venenatis lectus. Eget felis eget nunc lobortis mattis. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Blandit turpis cursus in hac habitasse platea. Adipiscing
at in tellus integer feugiat scelerisque. Ut eu sem integer vitae justo. Id velit ut tortor pretium viverra suspendisse potenti. Nunc pulvinar sapien et ligula ullamcorper malesuada. Nulla aliquet enim tortor at. Suspendisse interdum consectetur
libero id faucibus. Vitae et leo duis ut diam quam nulla porttitor massa. Posuere ac ut consequat semper viverra nam libero. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Ultricies leo integer malesuada nunc vel risus commodo viverra.
Mi bibendum neque egestas congue quisque egestas diam. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Nec feugiat in fermentum posuere urna nec. Cras ornare arcu dui vivamus arcu. Tincidunt vitae semper quis lectus nulla. Faucibus
in ornare quam viverra orci sagittis eu volutpat. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Molestie at elementum eu facilisis sed odio morbi quis commodo. In aliquam sem fringilla ut morbi tincidunt augue. Quam pellentesque
nec nam aliquam sem et tortor consequat. In massa tempor nec feugiat nisl. Suspendisse sed nisi lacus sed viverra tellus in hac. Pretium lectus quam id leo in vitae. Maecenas sed enim ut sem viverra aliquet eget. Nulla malesuada pellentesque elit
eget gravida cum sociis. Consectetur a erat nam at lectus. In fermentum et sollicitudin ac orci. Purus ut faucibus pulvinar elementum integer enim. Ut diam quam nulla porttitor massa id neque. Vitae semper quis lectus nulla at. Amet facilisis magna
etiam tempor orci eu lobortis elementum nibh. Etiam sit amet nisl purus. Lectus mauris ultrices eros in cursus turpis massa. Vel facilisis volutpat est velit egestas dui id ornare arcu. Feugiat vivamus at augue eget arcu dictum varius. Sem et tortor
consequat id porta nibh venenatis cras sed. Euismod elementum nisi quis eleifend. Etiam non quam lacus suspendisse faucibus. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Suspendisse interdum consectetur libero id faucibus
nisl tincidunt eget. Auctor augue mauris augue neque gravida in. Ornare arcu dui vivamus arcu felis bibendum ut tristique. Ullamcorper sit amet risus nullam eget. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus.
Nec ultrices dui sapien eget mi proin sed libero enim. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Vel risus commodo viverra maecenas accumsan. Donec pretium vulputate sapien nec sagittis aliquam malesuada.
Imperdiet sed euismod nisi porta lorem mollis aliquam ut. Nunc sed blandit libero volutpat sed cras. Enim eu turpis egestas pretium aenean pharetra magna ac placerat. Augue ut lectus arcu bibendum. Orci porta non pulvinar neque laoreet suspendisse.
Gravida neque convallis a cras semper. Bibendum enim facilisis gravida neque convallis a cras semper. Elementum curabitur vitae nunc sed velit dignissim sodales ut. Mauris in aliquam sem fringilla ut morbi tincidunt. Consequat ac felis donec et
odio. Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Vel pharetra vel turpis nunc. Velit aliquet sagittis id consectetur purus ut. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Ut faucibus pulvinar elementum integer.
Convallis posuere morbi leo urna molestie at elementum. Justo nec ultrices dui sapien. Sed blandit libero volutpat sed cras ornare arcu dui. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Adipiscing elit ut aliquam purus
sit amet luctus venenatis lectus. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Dictumst quisque sagittis purus sit. Pellentesque nec nam aliquam sem et tortor consequat id. Diam ut venenatis tellus in. Eu nisl nunc mi ipsum
faucibus vitae aliquet nec. Consequat interdum varius sit amet mattis vulputate enim nulla aliquet. Adipiscing diam donec adipiscing tristique risus. Tortor at auctor urna nunc id cursus metus aliquam eleifend. Eget dolor morbi non arcu risus quis
varius. Facilisis volutpat est velit egestas dui. Varius vel pharetra vel turpis nunc eget. Eget mi proin sed libero enim sed faucibus turpis. Euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Ultricies mi quis hendrerit
dolor magna eget est lorem. Amet facilisis magna etiam tempor orci. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Elit ut aliquam purus sit amet luctus venenatis lectus. Eget lorem dolor sed viverra ipsum nunc. Magna sit amet purus
gravida quis blandit turpis. Eget felis eget nunc lobortis mattis aliquam. Turpis egestas pretium aenean pharetra magna ac. In ornare quam viverra orci sagittis eu volutpat. Feugiat in fermentum posuere urna nec tincidunt praesent semper feugiat.
Purus in mollis nunc sed id semper risus in hendrerit. Odio tempor orci dapibus ultrices in. Viverra vitae congue eu consequat ac felis donec et odio. Etiam sit amet nisl purus in mollis nunc. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper
velit sed. Nibh tellus molestie nunc non blandit. Pharetra sit amet aliquam id diam maecenas ultricies. Eu facilisis sed odio morbi quis commodo. Id consectetur purus ut faucibus. Blandit cursus risus at ultrices mi tempus. Id interdum velit laoreet
id donec ultrices. Purus gravida quis blandit turpis cursus in. A scelerisque purus semper eget. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. At augue eget arcu dictum varius duis. Suspendisse faucibus interdum posuere lorem.
Id faucibus nisl tincidunt eget nullam. Diam maecenas ultricies mi eget mauris pharetra et ultrices. Tortor posuere ac ut consequat semper viverra. Est lorem ipsum dolor sit amet. Scelerisque eleifend donec pretium vulputate sapien. Tempus iaculis
urna id volutpat lacus laoreet. Tristique nulla aliquet enim tortor. Consectetur a erat nam at lectus. Mi sit amet mauris commodo quis. Purus gravida quis blandit turpis. Mi eget mauris pharetra et ultrices neque ornare. Ornare arcu dui vivamus
arcu. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. At quis risus sed vulputate odio ut. Sed augue lacus viverra vitae. Sit amet purus gravida quis blandit turpis cursus in. Enim blandit volutpat maecenas volutpat blandit aliquam.
Lacus sed turpis tincidunt id aliquet risus. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Gravida arcu ac tortor dignissim convallis aenean. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Tortor vitae purus
faucibus ornare suspendisse sed nisi lacus. Varius sit amet mattis vulputate enim. Enim diam vulputate ut pharetra. Pharetra sit amet aliquam id diam maecenas ultricies mi eget. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Odio
euismod lacinia at quis risus sed. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Massa id neque aliquam vestibulum. Id donec ultrices tincidunt arcu non sodales neque sodales. Iaculis eu non diam phasellus vestibulum lorem sed risus.
Volutpat ac tincidunt vitae semper quis lectus nulla at. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Arcu bibendum at varius vel pharetra vel turpis. Velit aliquet sagittis id consectetur purus ut faucibus. Enim tortor
at auctor urna nunc. Ut etiam sit amet nisl purus in mollis nunc sed. Eu feugiat pretium nibh ipsum consequat. Dui sapien eget mi proin sed. Habitant morbi tristique senectus et netus. Convallis aenean et tortor at risus viverra adipiscing at. Tempus
imperdiet nulla malesuada pellentesque. Massa id neque aliquam vestibulum morbi blandit cursus risus. Adipiscing bibendum est ultricies integer. Luctus accumsan tortor posuere ac ut consequat. Nulla facilisi etiam dignissim diam quis enim lobortis
scelerisque. Consequat mauris nunc congue nisi vitae suscipit tellus mauris. Placerat in egestas erat imperdiet sed euismod nisi porta. Est sit amet facilisis magna etiam tempor orci eu lobortis. Tortor at risus viverra adipiscing at in. Sed cras
ornare arcu dui vivamus. Neque laoreet suspendisse interdum consectetur. Dui faucibus in ornare quam viverra orci. Cursus sit amet dictum sit amet justo donec enim. Maecenas volutpat blandit aliquam etiam erat velit. Id nibh tortor id aliquet lectus
proin. Vulputate ut pharetra sit amet. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Tincidunt dui ut ornare lectus sit amet. Diam donec adipiscing tristique risus
nec feugiat in fermentum posuere. Lacinia quis vel eros donec ac odio tempor orci. Sodales ut eu sem integer vitae justo eget magna. Id leo in vitae turpis massa sed. Aenean et tortor at risus viverra adipiscing at. Malesuada pellentesque elit eget
gravida cum sociis natoque penatibus et. Feugiat vivamus at augue eget arcu dictum varius duis at. Quis auctor elit sed vulputate mi sit amet mauris. Duis ut diam quam nulla porttitor massa id neque aliquam. Dictum varius duis at consectetur lorem
donec massa. Sagittis orci a scelerisque purus semper eget. Arcu felis bibendum ut tristique et. Nibh ipsum consequat nisl vel. Fermentum odio eu feugiat pretium nibh ipsum consequat. Amet commodo nulla facilisi nullam vehicula ipsum a. Enim tortor
at auctor urna nunc id. Faucibus nisl tincidunt eget nullam non. Volutpat odio facilisis mauris sit amet massa. Elementum integer enim neque volutpat ac tincidunt vitae semper. Ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae.
In tellus integer feugiat scelerisque varius morbi enim. At consectetur lorem donec massa. Tristique risus nec feugiat in fermentum posuere urna. Diam in arcu cursus euismod quis viverra nibh cras. Pellentesque nec nam aliquam sem et tortor consequat
id. Sem viverra aliquet eget sit amet tellus. Diam vel quam elementum pulvinar. Nec ultrices dui sapien eget mi proin. Eget egestas purus viverra accumsan in nisl nisi scelerisque. Vulputate odio ut enim blandit. Habitasse platea dictumst vestibulum
rhoncus est pellentesque elit. Pretium fusce id velit ut tortor pretium viverra suspendisse potenti. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Nulla facilisi cras fermentum odio eu feugiat pretium nibh. Integer eget aliquet nibh
praesent tristique magna sit. Ut pharetra sit amet aliquam. Aenean et tortor at risus viverra.</p>
</div>
<div id="footer">This will be footer</div>
</div>
Position: fixed clipping mask for a div
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>
Hiding div when reach a div by scrolling
I need to make a navbar in the left of the page just like this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sidenav_fixed2 But i need also to make that navbar hiding when reaching footer and re-appear when scrolling up. Is it possible? Thank in advance
This can be done using CSS and Jquery
Ill provide you and example here to see how you can achieve this.
$(document).ready(function() {
function sticky_relocate() {
var window_top = $(window).scrollTop();
var footer_top = $("#footer").offset().top;
var div_top = $('#sticky-anchor').offset().top;
var div_height = $("#sticky").height();
if (window_top + div_height > footer_top) $('#sticky').removeClass('stick');
else if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
});
#sticky {
padding: 0.5ex;
width: 200px;
height: 300px;
background-color: #eee;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
float: left;
}
#sticky.stick {
position: fixed;
top: 0;
z-index: 10;
border-radius: 0 0 0.5em 0.5em;
}
#sticky a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
#sticky a:hover {
color: #064579;
}
.content-holder {
margin-left: 225px;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}
#footer {
width: 100%;
height: 600px;
background: #ccc;
z-index: 999999
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainsection">
<div class="sidenav" id="sticky">
About Services Clients Contact
</div>
<div id="sticky-anchor"></div>
<div class="content-holder">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sagittis id consectetur purus ut faucibus pulvinar. Turpis massa tincidunt dui ut ornare lectus sit amet est. Semper auctor neque vitae tempus quam pellentesque nec nam. Ut faucibus pulvinar elementum integer enim neque volutpat. Nec dui nunc mattis enim ut. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Proin sed libero enim sed faucibus turpis. Fermentum posuere urna nec tincidunt. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat. Id aliquet lectus proin nibh nisl. Venenatis urna cursus eget nunc scelerisque viverra mauris. Vitae auctor eu augue ut lectus. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Mauris sit amet massa vitae tortor condimentum lacinia quis. Mauris rhoncus aenean vel elit scelerisque. Varius morbi enim nunc faucibus a pellentesque sit. Egestas integer eget aliquet nibh praesent tristique.</p>
<p>Sit amet porttitor eget dolor morbi non arcu risus quis. Id diam vel quam elementum pulvinar etiam. Id porta nibh venenatis cras sed felis eget velit. Auctor elit sed vulputate mi sit amet mauris commodo quis. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Ultricies integer quis auctor elit sed vulputate. Netus et malesuada fames ac turpis egestas maecenas pharetra. Molestie at elementum eu facilisis sed odio morbi. Mi bibendum neque egestas congue quisque egestas. Netus et malesuada fames ac turpis egestas. Convallis aenean et tortor at risus viverra adipiscing at. Elit at imperdiet dui accumsan sit amet nulla facilisi.</p>
<p>Quam pellentesque nec nam aliquam sem. Nunc sed augue lacus viverra vitae. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Vitae justo eget magna fermentum iaculis eu. Eu augue ut lectus arcu bibendum. Consectetur adipiscing elit ut aliquam purus. Accumsan tortor posuere ac ut consequat semper viverra nam libero. Donec et odio pellentesque diam volutpat commodo. Elementum facilisis leo vel fringilla est ullamcorper eget nulla. Turpis egestas pretium aenean pharetra magna ac placerat. Habitasse platea dictumst quisque sagittis. Est velit egestas dui id ornare arcu odio ut sem. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Integer quis auctor elit sed vulputate mi. A scelerisque purus semper eget duis. Eget sit amet tellus cras adipiscing enim. Cursus risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. Urna nunc id cursus metus aliquam eleifend mi. Id leo in vitae turpis massa. Nibh tellus molestie nunc non blandit massa enim nec dui.</p>
<p>Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus. Non tellus orci ac auctor augue mauris augue neque gravida. Nisl nunc mi ipsum faucibus vitae aliquet nec. Consectetur adipiscing elit pellentesque habitant morbi tristique. Nisi est sit amet facilisis magna etiam. Odio facilisis mauris sit amet massa vitae tortor. Amet est placerat in egestas erat imperdiet. Ut eu sem integer vitae justo eget magna fermentum. Ac felis donec et odio pellentesque diam volutpat commodo.</p>
<p>Eleifend mi in nulla posuere sollicitudin aliquam ultrices. Mauris commodo quis imperdiet massa. Nunc id cursus metus aliquam eleifend mi in nulla. Nisi est sit amet facilisis magna etiam tempor orci eu. Vitae ultricies leo integer malesuada nunc vel risus. Lobortis feugiat vivamus at augue eget arcu. Risus at ultrices mi tempus. In hac habitasse platea dictumst vestibulum rhoncus. Cursus euismod quis viverra nibh cras pulvinar mattis. Odio aenean sed adipiscing diam donec adipiscing tristique risus. Odio eu feugiat pretium nibh ipsum consequat. Amet tellus cras adipiscing enim. Ornare arcu odio ut sem nulla pharetra diam.</p>
<p>Facilisis gravida neque convallis a cras semper auctor. Ut enim blandit volutpat maecenas volutpat blandit aliquam. Et molestie ac feugiat sed lectus vestibulum mattis. Eget mauris pharetra et ultrices neque ornare aenean. Dolor morbi non arcu risus quis varius. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Erat nam at lectus urna. Lorem mollis aliquam ut porttitor leo a diam. Congue quisque egestas diam in. Maecenas pharetra convallis posuere morbi leo urna molestie at.</p>
<p>Purus viverra accumsan in nisl nisi scelerisque eu ultrices. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Netus et malesuada fames ac turpis egestas maecenas. Tortor id aliquet lectus proin. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a. Scelerisque fermentum dui faucibus in. Nisi est sit amet facilisis magna etiam. Scelerisque eleifend donec pretium vulputate. Enim nunc faucibus a pellentesque sit amet porttitor eget. Velit euismod in pellentesque massa placerat duis ultricies. Vel quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Et ultrices neque ornare aenean euismod elementum. Orci porta non pulvinar neque.</p>
<p>Orci porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Praesent semper feugiat nibh sed pulvinar. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Vitae aliquet nec ullamcorper sit amet risus nullam eget. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi. Aliquet risus feugiat in ante metus. Maecenas accumsan lacus vel facilisis volutpat est. Faucibus ornare suspendisse sed nisi lacus sed viverra. Sed vulputate odio ut enim. Consectetur adipiscing elit ut aliquam purus.</p>
<p>Nam libero justo laoreet sit amet cursus sit amet dictum. Adipiscing elit pellentesque habitant morbi tristique senectus et netus. In nulla posuere sollicitudin aliquam ultrices sagittis orci a. Mi tempus imperdiet nulla malesuada. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim. Egestas diam in arcu cursus euismod quis viverra nibh cras. Nisi quis eleifend quam adipiscing vitae proin. Est sit amet facilisis magna etiam tempor. Enim sed faucibus turpis in eu mi bibendum neque egestas.</p>
<p>Gravida dictum fusce ut placerat orci nulla pellentesque. Nulla malesuada pellentesque elit eget. Convallis tellus id interdum velit. Lorem sed risus ultricies tristique nulla aliquet enim tortor at. Molestie at elementum eu facilisis. Diam phasellus vestibulum lorem sed risus ultricies tristique. Nunc sed velit dignissim sodales. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Id aliquet risus feugiat in ante. Sapien pellentesque habitant morbi tristique senectus et netus et. Amet volutpat consequat mauris nunc congue nisi. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Purus gravida quis blandit turpis cursus in hac habitasse platea. Nulla aliquet porttitor lacus luctus accumsan tortor. Ut tristique et egestas quis ipsum suspendisse ultrices gravida.</p>
</div>
<div id="footer">
<h1>The footer element</h1>
</div>
</div>
Part of Footer is not visible
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>