Make absolute positioned div take up full width of screen - html

I have an absolute positioned div and I set it to have the full width of the screen with 100vw but the problem is that it starts where its parent starts and not at the left side of the viewport. How can I get the element to start from left to right?
.main-navigation li {
float: left;
position: relative;
height: 100%;
display: flex;
}
.nav-dropdown {
display: none;
left: 0;
top: 50px;
position: absolute;
background-color: #ebebeb;
z-index: 2;
height: 300px;
}
<li id="menu-item-120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-120">
<a class="nav-titles" href="http://localhost/wp/checkout/">Clothes</a>
<div class="nav-dropdown"></div>
</li>
E: Added the code. The div that I'm talking about is .nav-dropdown.

One solution will be, the element that is set to position:absolute will look for the parent with position:relative, so if you remove the relative positioning from li tag, and move it to the parent body tag, it will behave as you wanted! Refer the below snippet.
html, body{
height:auto;
margin:0px;
width:100%;
position: relative;
}
.main-navigation li {
float: left;
height: 100%;
display: flex;
}
.nav-dropdown {
/*display: none;*/
left: 0;
top: 50px;
position: absolute;
background-color: #ebebeb;
z-index: 2;
width:100%;
height: 300px;
}
<li id="menu-item-120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-120">
<a class="nav-titles" href="http://localhost/wp/checkout/">Clothes</a>
<div class="nav-dropdown"></div>
</li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac aliquet enim. Mauris maximus et dui sit amet fermentum. Aliquam at pharetra enim. Donec porttitor aliquet augue, ac egestas felis. In nec semper purus. Pellentesque sagittis vulputate feugiat. Donec tempor metus a risus interdum, a volutpat purus ultrices. Aenean facilisis diam a nisi dignissim venenatis ac in ipsum. Cras laoreet lacus quis placerat vehicula. Sed finibus justo neque, nec sollicitudin orci rhoncus nec. Etiam at ornare nibh. Proin mollis nisl id odio tempor varius.
Mauris vestibulum tortor et velit lacinia vulputate. Quisque vel tempor augue, at hendrerit tellus. Duis vehicula fringilla nunc, viverra aliquet metus sodales id. Phasellus turpis nisl, pharetra ac libero ac, eleifend interdum sapien. Mauris sit amet fermentum tortor, ut condimentum diam. In tincidunt semper consectetur. Duis id urna blandit, porttitor dolor in, pharetra justo. Proin congue fringilla ante vitae blandit. Mauris vel ultrices elit, ac faucibus nulla. Nam lorem diam, commodo id mauris vel, pellentesque posuere eros. Nullam sit amet metus ut purus condimentum posuere.
Etiam tristique laoreet consectetur. Etiam et orci pellentesque, tristique lacus in, dictum urna. Curabitur venenatis, lacus id vehicula luctus, purus enim aliquam erat, non molestie justo tortor a leo. Sed hendrerit leo vel nisi congue vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla viverra ultricies accumsan. Mauris auctor massa at leo euismod maximus sed ac turpis. Nam id sapien orci. Quisque eu imperdiet neque. Fusce vel justo orci. Praesent mattis, orci sed imperdiet suscipit, sem sem dictum risus, nec auctor velit turpis at ex. Pellentesque luctus lorem at velit malesuada, id ultricies sem sollicitudin. Donec fermentum egestas nisi, ut blandit leo posuere blandit. In hac habitasse platea dictumst. Cras magna mauris, dignissim sed ligula in, feugiat feugiat lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut placerat ante arcu, nec lobortis mauris posuere tincidunt. Suspendisse facilisis quis metus id imperdiet. Etiam tempus congue viverra. Nullam in tincidunt erat. Pellentesque feugiat orci sagittis tristique hendrerit. Cras suscipit volutpat imperdiet. Sed ac nulla non nisi tristique aliquam. Nam egestas dolor in feugiat vestibulum. Phasellus in vestibulum diam. Mauris sit amet bibendum ipsum, non faucibus dolor. In suscipit scelerisque lacus non condimentum. Nulla eu viverra libero. Nam mi enim, vulputate at ornare finibus, vehicula at mi. Nulla finibus vel risus vitae tristique. Duis ut ultricies purus, ornare condimentum tellus.
Aenean congue lacus lectus, ac luctus risus scelerisque vitae. Duis sed tempor felis. Donec fringilla aliquet purus. Sed ultricies mauris eu lectus facilisis sodales. Aliquam imperdiet efficitur lacinia. Aliquam tempor sollicitudin sem vitae blandit. Aenean facilisis efficitur finibus. Aenean scelerisque nisl ac lectus viverra, vel elementum nisl ornare. Nam diam erat, volutpat ac tortor id, viverra suscipit nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac aliquet enim. Mauris maximus et dui sit amet fermentum. Aliquam at pharetra enim. Donec porttitor aliquet augue, ac egestas felis. In nec semper purus. Pellentesque sagittis vulputate feugiat. Donec tempor metus a risus interdum, a volutpat purus ultrices. Aenean facilisis diam a nisi dignissim venenatis ac in ipsum. Cras laoreet lacus quis placerat vehicula. Sed finibus justo neque, nec sollicitudin orci rhoncus nec. Etiam at ornare nibh. Proin mollis nisl id odio tempor varius.
Mauris vestibulum tortor et velit lacinia vulputate. Quisque vel tempor augue, at hendrerit tellus. Duis vehicula fringilla nunc, viverra aliquet metus sodales id. Phasellus turpis nisl, pharetra ac libero ac, eleifend interdum sapien. Mauris sit amet fermentum tortor, ut condimentum diam. In tincidunt semper consectetur. Duis id urna blandit, porttitor dolor in, pharetra justo. Proin congue fringilla ante vitae blandit. Mauris vel ultrices elit, ac faucibus nulla. Nam lorem diam, commodo id mauris vel, pellentesque posuere eros. Nullam sit amet metus ut purus condimentum posuere.
Etiam tristique laoreet consectetur. Etiam et orci pellentesque, tristique lacus in, dictum urna. Curabitur venenatis, lacus id vehicula luctus, purus enim aliquam erat, non molestie justo tortor a leo. Sed hendrerit leo vel nisi congue vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla viverra ultricies accumsan. Mauris auctor massa at leo euismod maximus sed ac turpis. Nam id sapien orci. Quisque eu imperdiet neque. Fusce vel justo orci. Praesent mattis, orci sed imperdiet suscipit, sem sem dictum risus, nec auctor velit turpis at ex. Pellentesque luctus lorem at velit malesuada, id ultricies sem sollicitudin. Donec fermentum egestas nisi, ut blandit leo posuere blandit. In hac habitasse platea dictumst. Cras magna mauris, dignissim sed ligula in, feugiat feugiat lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut placerat ante arcu, nec lobortis mauris posuere tincidunt. Suspendisse facilisis quis metus id imperdiet. Etiam tempus congue viverra. Nullam in tincidunt erat. Pellentesque feugiat orci sagittis tristique hendrerit. Cras suscipit volutpat imperdiet. Sed ac nulla non nisi tristique aliquam. Nam egestas dolor in feugiat vestibulum. Phasellus in vestibulum diam. Mauris sit amet bibendum ipsum, non faucibus dolor. In suscipit scelerisque lacus non condimentum. Nulla eu viverra libero. Nam mi enim, vulputate at ornare finibus, vehicula at mi. Nulla finibus vel risus vitae tristique. Duis ut ultricies purus, ornare condimentum tellus.
Aenean congue lacus lectus, ac luctus risus scelerisque vitae. Duis sed tempor felis. Donec fringilla aliquet purus. Sed ultricies mauris eu lectus facilisis sodales. Aliquam imperdiet efficitur lacinia. Aliquam tempor sollicitudin sem vitae blandit. Aenean facilisis efficitur finibus. Aenean scelerisque nisl ac lectus viverra, vel elementum nisl ornare. Nam diam erat, volutpat ac tortor id, viverra suscipit nulla.

Elements with position: absolute are always positioned against their closest parent with non-static position. If you want to position against the viewport, use position: fixed instead.

Related

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>

(Chrome bug?) pointer-events : none , prevents scrolling underneath on Chrome Android 78

[UPDATE], bug filed : https://bugs.chromium.org/p/chromium/issues/detail?id=1011866&q=pointer-events&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified
I realised that now on Chrome 78.0.3904, (Android 9), applying pointer-events:none to a fixed position overlaying element is preventing the elements underneath from being scrolled.
I employ this technique alot in the sites i make and its been working fine till i realised that this is broken today. But it still works fine on all other devices and browsers. Safari on IOS for example.
I did a simple test that i attached below, and you can try on android chrome browsers to see the issue.
Heres also an external url with the same test : https://www.fariskassim.com/stage/rebel9/democracy_museum/sandbox/chrome_bug/
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(255, 0, 0, 0.5);
pointer-events: none;
}
.scrollable_content {
position: fixed;
top:0;
left: 0;
width: 100%;
height: 100%;;
overflow:auto;
}
<div class="overlay"></div>
<div class="scrollable_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet justo at sapien vulputate, dictum pellentesque turpis ultricies. Quisque pellentesque maximus ultrices. Vivamus tempus sem vehicula varius laoreet. Donec gravida sit amet lorem ac molestie. Nunc eget lobortis turpis. Praesent fringilla quam non ligula bibendum, vel consectetur orci lobortis. Morbi a efficitur augue. Donec in nisl pellentesque, scelerisque arcu non, dictum augue.
Nam purus augue, auctor vitae purus et, gravida viverra velit. Vivamus a massa euismod, luctus leo sed, maximus eros. Phasellus egestas varius euismod. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras pretium magna a justo vestibulum, mattis efficitur enim consequat. Nunc malesuada leo sed turpis rhoncus cursus. Phasellus mollis elementum magna ac varius.
Sed varius dui non leo fermentum, eu aliquet risus bibendum. Duis ac diam tellus. Nullam eleifend sed dui eu iaculis. Nulla nec ultrices turpis, at tempor enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam venenatis porttitor mauris, et consequat tortor euismod quis. Donec at tortor convallis, convallis urna eu, fermentum justo.
Cras egestas, turpis eget sodales egestas, lacus erat hendrerit diam, id dapibus augue enim sit amet justo. Nullam a augue ac diam convallis placerat at id lacus. In eu ipsum dui. Nunc lacinia molestie ligula, id suscipit erat. Praesent euismod eget nunc non facilisis. Aenean quis ipsum egestas, dictum sem sit amet, vestibulum arcu. Phasellus pretium id sem a euismod. Fusce eu ornare purus. Vestibulum porttitor augue a suscipit volutpat. Curabitur sodales urna libero, sed posuere odio lacinia ut. Cras quis mauris augue.
Ut augue quam, elementum non ante in, blandit lacinia ex. Vestibulum in lectus pulvinar, faucibus nisi tincidunt, placerat dolor. Ut lacinia risus nunc, eget blandit dolor malesuada in. Donec at urna ac orci pulvinar lobortis. Donec aliquet ex nec faucibus suscipit. Nulla libero arcu, efficitur ut elit vel, congue egestas massa. Etiam laoreet odio leo, ut vehicula nunc consequat fringilla. Nam arcu mauris, vehicula sed sagittis a, sodales et felis. Pellentesque in hendrerit orci. Sed ornare tristique turpis sed ultrices.
Aliquam mollis mi sit amet ex lacinia, sed sollicitudin ipsum efficitur. Ut elementum vulputate luctus. Duis id mollis eros. Praesent pellentesque, augue nec vestibulum finibus, est elit faucibus quam, eu condimentum dui mi at erat. Duis varius ullamcorper auctor. Suspendisse potenti. Mauris quis justo venenatis, lacinia diam eu, gravida augue. Ut in magna arcu. Etiam nec arcu ex. Phasellus ut nibh leo. Proin consectetur lacus risus, et sodales nisi luctus placerat. Maecenas eget fringilla sem, vitae sagittis nisi. Mauris et maximus velit. Fusce a velit sed quam porttitor suscipit vitae nec lectus.
Nulla lobortis ligula condimentum elit pellentesque vulputate. Aenean ac nisl in metus tincidunt viverra. Integer risus urna, fringilla ac metus ac, congue feugiat nulla. Donec dui risus, gravida eu tempor iaculis, vulputate at ante. Donec cursus elit ac ipsum pretium, non dapibus arcu vehicula. Nulla porttitor urna a lectus molestie, vitae dictum enim varius. Sed justo turpis, rhoncus eget tortor ut, rhoncus condimentum ante. Nulla erat est, interdum pulvinar diam vitae, fringilla interdum risus. Donec maximus, nisl ac tristique tincidunt, lacus metus posuere nisl, a viverra ante dolor in libero. Donec eleifend congue lectus. Maecenas sed mattis nisl. Vivamus lectus eros, interdum eu congue quis, fermentum at odio. Nullam maximus ligula in posuere viverra. Donec vitae consequat nisi. Fusce nibh ex, aliquam et erat a, varius congue nisi.
Integer tristique sodales enim at ultrices. Integer at lobortis felis. Maecenas et justo imperdiet justo tempor dapibus. Donec convallis tortor sit amet commodo condimentum. Sed maximus ipsum nec sapien cursus, id molestie est sodales. Curabitur nisi justo, scelerisque vitae sagittis at, ultricies at odio. Nulla commodo libero eros, quis convallis tortor finibus quis. Vivamus ipsum lorem, tristique eu lobortis vitae, imperdiet sit amet ipsum. Sed eget volutpat lacus. Phasellus sit amet sapien lacus. Mauris sollicitudin facilisis sapien, bibendum ornare libero ultricies non. Vivamus magna augue, maximus vitae turpis vitae, tincidunt ornare magna. Donec aliquet diam nec lobortis imperdiet. Sed non tellus a est laoreet pharetra. Donec eleifend porta nisl, ac euismod elit fermentum at.
Vestibulum maximus dui sed nisi sollicitudin, quis lacinia lectus viverra. Praesent dictum viverra ipsum ut finibus. Proin eget accumsan nulla. Nulla finibus viverra orci, a rhoncus enim condimentum vitae. Vivamus lacinia eros ante, in pellentesque diam sodales sit amet. Ut ut nibh ex. Proin aliquet ornare erat. Suspendisse ullamcorper condimentum libero nec molestie. Quisque fringilla lectus neque, at suscipit ex congue nec. Nullam accumsan vitae nisi eget lobortis. Pellentesque quis imperdiet dui, non porttitor ante. Mauris ipsum ante, accumsan commodo vulputate ut, fringilla id mauris. Duis pretium vulputate sapien sit amet sodales.
</div>
Yes!! Maybe new Chrome version not supporting this technique. Make a try with following code snippet:
.scrollable_content {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
z-index: 11;
opacity: .8;
}
I don't think this may give the same output as you defined, but it looks somewhat better.

fixed div sits on top of another div

I have a fixed div at the bottom of my page, but it is covering up another div that is behind it. How can I make it where the markup behind the fixed div can be scrolled? My end goal is to have the buttons fixed at the very bottom but if the content is behind the buttons then allow the scrollbar to show. I tried adding an over-flow:auto, but it didn't change. My assumption why that didn't work is because the viewport does think that the div behind the button is viewable...But the fixed position div just has a higher z value so it's just going to cover it anyways. I don't want to add any padding to accommodate the empty space.
Parent Container
.page-container {
padding: 10px;
position: relative;
.page-title {
margin-bottom: 15px;
}
.page-title-fixed {
position: fixed;
left: 0;
right: 0;
margin-top: -15px;
padding: 15px;
margin-bottom: 0;
padding-bottom: 0;
background: $bgGray;
z-index: 999;
.page-title { margin-bottom: 0; }
}
}
Fixed Buttons styling
style={{
position: 'fixed',
bottom: 0,
left: 0,
height: 60,
width: '100%',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#f6f6f6',
borderTop: '1px solid #e0e0e0'
}}
If I understand what you're asking, you want to have a fixed element, but you need to be able to scroll down through body content without the fixed element obscuring the body content?
If so, the simplest way is to add padding to the bottom of the body content equivalent to (or higher) than the fixed element. This will ensure that as you scroll all the way down you won't have text fall behind the fixed element.
(If I misunderstood please clarify and I'll try to help further)
.content {
width: 100%;
height:90%;
padding: 20px;
font-family: sans-serif;
/* This doesn't let the text fall behind the fixed element */
padding-bottom: 90px;
}
.fixed {
position: fixed;
bottom: 0;
width: 100%;
height: auto;
background: #007ccc;
color: #fff;
font-family: sans-serif;
padding: 30px 0;
text-align: center;
}
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo tristique orci id tincidunt. Aliquam erat volutpat. Aliquam erat volutpat. Etiam hendrerit, nisi non pharetra laoreet, mauris odio ultricies ligula, id convallis dolor augue vitae velit. Praesent condimentum metus at turpis consequat, sed posuere orci euismod. Suspendisse in quam facilisis, imperdiet dolor at, dignissim risus. Mauris ut libero ante. Donec porttitor nibh sit amet massa tristique efficitur. Aenean commodo vel nisi ac lacinia. Etiam in faucibus enim, eget vehicula sem. Etiam justo nunc, bibendum id ligula nec, ultrices accumsan lorem. Mauris imperdiet augue vitae vulputate efficitur. Donec id sapien dui. Nam lacus nibh, cursus sed laoreet a, feugiat id arcu. Cras sed ultricies nibh, pretium placerat augue.
Maecenas mattis arcu augue, interdum rhoncus mauris condimentum at. Donec pharetra eleifend tincidunt. Sed iaculis orci id ex dapibus scelerisque. Aenean euismod felis sit amet enim dictum, sed pellentesque nisi rutrum. Pellentesque iaculis massa non massa aliquam volutpat. Praesent interdum varius orci, in ullamcorper turpis eleifend at. Phasellus in cursus lacus, at ultricies mauris. Pellentesque tristique tellus non pharetra vulputate. Proin sodales felis est, sit amet ornare turpis blandit eu.
Nulla finibus purus vel elit vehicula, ut tincidunt diam suscipit. Nullam sed congue nisi, eget venenatis felis. Integer hendrerit est sit amet elementum tempor. Duis molestie mi id consequat semper. Donec rutrum sed lectus et pellentesque. Vestibulum sit amet ligula elit. Donec et felis at mi volutpat finibus. Suspendisse vitae libero gravida, gravida erat non, mattis turpis. Cras facilisis porta diam, vel molestie libero hendrerit sed. Proin imperdiet commodo metus non pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean tristique elit eu blandit imperdiet. Suspendisse tincidunt turpis at orci tincidunt molestie. Vestibulum dapibus maximus augue, ut cursus ante convallis non.
Nulla id feugiat nulla, at placerat ipsum. Sed id turpis quis mauris vehicula eleifend vel at risus. Vestibulum dictum orci in augue finibus, a lacinia nisi rutrum. Cras vehicula sodales enim sit amet maximus. Donec in justo porta, volutpat mi eget, feugiat elit. Nunc bibendum bibendum quam sit amet pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ipsum tellus, tincidunt nec laoreet sit amet, semper in lorem. Donec suscipit risus quis pellentesque porta. Duis ac felis lobortis, blandit purus eu, dapibus arcu. Nullam semper varius felis nec gravida. Nullam feugiat convallis porta.
Praesent mollis urna ex, a luctus dui tristique et. Nulla bibendum tristique erat, ac consequat ligula suscipit ut. Morbi turpis nulla, facilisis et maximus eu, pretium et magna. Integer egestas est id neque dictum ullamcorper. Etiam consequat dolor at nulla maximus, id dictum dui laoreet. Sed mattis ex in tortor malesuada sagittis. Nulla facilisi. Maecenas sapien erat, pretium ac dignissim nec, tincidunt ut nisi. Quisque tincidunt volutpat dui, ut vulputate nunc lobortis a. Mauris felis nisl, imperdiet varius iaculis sit amet, tempor ac erat. Proin sodales elementum finibus. Fusce ut ultricies nisl, sed venenatis justo. Pellentesque diam urna, semper et risus at, placerat finibus risus.
Sed sagittis mattis lorem, vitae dictum nunc egestas a. Sed pretium orci vitae ipsum pretium posuere. Sed commodo dui eget dignissim luctus. Nullam ullamcorper libero cursus libero lobortis, nec tempus eros varius. Fusce massa ligula, lacinia in quam sit amet, placerat ullamcorper tellus. Donec convallis justo non sem viverra hendrerit. Sed ac vestibulum ipsum, ac euismod augue. Donec tempus dignissim arcu in bibendum. Donec placerat vitae nunc consequat laoreet. Vivamus sagittis interdum arcu et interdum. Aliquam ullamcorper fringilla ultrices. Nulla tempus risus at interdum sagittis. Praesent ultrices, ex at viverra ultricies, lectus augue tempus justo, id luctus leo augue sed urna. Quisque nec mi et risus blandit volutpat. Nulla at purus in nunc tincidunt lacinia et eu libero.
Donec velit nibh, fringilla eu condimentum vitae, dapibus sed nibh. Nunc urna tellus, iaculis non congue id, posuere sit amet neque. Curabitur vehicula finibus orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed facilisis tortor sed mauris vehicula, vel commodo nisi faucibus. Duis sit amet euismod nisi. Duis efficitur, dolor ut ultrices accumsan, purus purus cursus felis, ac sodales libero justo efficitur magna. Morbi tellus tortor, tempor in mauris at, dapibus iaculis diam. Suspendisse condimentum magna nec libero dignissim, eu fermentum justo lobortis. Mauris ut dapibus lacus. Nullam ligula ipsum, posuere id lacus et, ultricies blandit sapien. Integer enim nisl, euismod eu venenatis a, consectetur sit amet ante. Aenean eu porta ipsum.
Aenean a lobortis massa, id efficitur tellus. Maecenas bibendum orci non imperdiet accumsan. Ut luctus magna id mi lacinia, in feugiat justo porta. Phasellus efficitur elementum tellus, in porttitor enim semper non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam cursus justo non aliquam posuere. Nunc tempor eget dui quis rhoncus. Nulla facilisi. Curabitur nec maximus nunc, condimentum accumsan massa.
Fusce justo leo, laoreet quis consectetur sed, cursus sed purus. Sed eget tincidunt velit. Donec id lectus a urna volutpat dictum. Aliquam commodo tincidunt lectus, a viverra enim. Nulla nec ante porttitor nunc sagittis tempus. Praesent volutpat porttitor est nec aliquet. Praesent aliquam aliquam leo laoreet ultricies. Mauris cursus leo at tortor ornare, et dictum libero fringilla. Ut massa est, fringilla eget nisi non, iaculis semper ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut congue pellentesque arcu ac laoreet. Nam eu malesuada justo.
Ut egestas ornare tellus nec iaculis. Sed sit amet purus eu diam interdum tempus. Integer bibendum dignissim justo. Suspendisse sed arcu faucibus ex aliquet feugiat. Nulla vestibulum, felis sed ultrices varius, tellus purus rutrum diam, vitae molestie enim nulla non dui. Duis ultricies mi tortor, sed molestie sem rhoncus vel. Quisque tincidunt viverra sapien, sed tristique justo volutpat sed. Nunc tempor sit amet nulla vel tincidunt. Suspendisse pellentesque facilisis sapien id faucibus. Donec sodales finibus augue, ut volutpat est auctor sit amet. Sed rutrum, lacus at rhoncus condimentum, tortor lectus porta eros, et blandit nibh elit in diam. Pellentesque semper et metus eget posuere. Integer at velit elit. Praesent non malesuada nisl.
Duis ut lacus tellus. Vivamus aliquam magna eu sem suscipit, non bibendum mauris lobortis. Donec placerat purus eget tortor blandit, at iaculis nibh pretium. Cras quis sollicitudin erat. Ut finibus mollis sem et vehicula. Mauris rutrum gravida blandit. Sed velit mi, congue vel arcu sit amet, mollis laoreet mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a hendrerit nunc. Pellentesque aliquam dictum arcu, eu mattis nunc consectetur nec. Fusce a malesuada turpis, in venenatis mi.
Maecenas nisl lorem, hendrerit vel dignissim id, efficitur et ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum molestie neque ut imperdiet vestibulum. Ut a felis et ligula scelerisque venenatis. Donec fermentum ex risus, ac eleifend eros tempor non. Maecenas consectetur purus eu dapibus efficitur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque vestibulum magna quis mollis commodo. Proin sed ex mollis, rhoncus turpis cursus, laoreet augue. Maecenas non enim diam. Fusce ultricies malesuada orci. Sed dictum cursus fermentum. Nunc vehicula felis non ex congue, eget fringilla lectus fringilla. Nulla aliquam nec arcu et dictum.
Nulla tincidunt purus sapien, in semper lectus viverra sed. In vulputate ante sit amet elit placerat semper. Duis lorem tellus, tempus in leo tincidunt, iaculis commodo risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vitae vestibulum elit. Ut facilisis lectus sed arcu dapibus facilisis id sed sapien. Nullam varius quam at enim vehicula ullamcorper. Proin nec mauris fringilla, mattis purus ac, efficitur felis. Mauris fringilla tellus non ligula ornare mollis. Aliquam pulvinar condimentum consequat. Nam sed libero non dui placerat ultricies.
Quisque pulvinar eros quis lacus dapibus vestibulum. Morbi quis orci ut nisl auctor auctor quis et dui. Fusce ex quam, aliquam at libero scelerisque, tincidunt euismod nulla. Integer vulputate dui sit amet sodales convallis. Duis porttitor nibh risus, a iaculis elit mattis suscipit. In hendrerit nibh erat, et aliquet magna cursus sit amet. Nullam libero leo, semper quis nulla id, pharetra euismod erat. Nulla vel est at lacus dictum pulvinar. Praesent pretium ante dolor, vel facilisis sapien porttitor sed. Nunc in aliquam ante. Proin consequat consectetur urna, eu pellentesque ipsum pharetra ut. Donec ultrices nisl vitae lorem suscipit consectetur. Phasellus vitae lorem et libero dapibus ullamcorper et eu mi.
Sed sagittis, tellus id congue egestas, felis magna tempor risus, nec dictum felis libero eget nunc. Maecenas id eleifend turpis. Nunc placerat odio dui, ut hendrerit tellus suscipit vitae. Morbi nunc lectus, lacinia scelerisque tortor ut, tincidunt fringilla lorem. Nullam dignissim eros eget ipsum rhoncus efficitur. Donec ac quam sodales, tempus risus vitae, aliquet lectus. Aenean non finibus risus. Mauris maximus egestas metus ut malesuada. Morbi egestas tempor tincidunt. Integer sagittis mi vitae elit sodales vestibulum. Curabitur varius dui a massa hendrerit fringilla. Pellentesque imperdiet ipsum in metus ornare sagittis. Nam eget posuere ante, id hendrerit est. Vestibulum vehicula aliquet odio et ornare. Curabitur augue diam, scelerisque vel dapibus eget, facilisis sed turpis. Morbi auctor faucibus lacus sed accumsan.
Integer consectetur dui nibh, varius ullamcorper lectus feugiat id. Vestibulum massa leo, egestas vestibulum sollicitudin in, convallis sit amet justo. Sed mauris justo, faucibus volutpat facilisis ac, volutpat non leo. Vestibulum convallis magna a massa rhoncus accumsan. Quisque et semper dui. Suspendisse euismod erat vel magna fringilla fermentum. Fusce pellentesque egestas tellus, mattis maximus metus rutrum quis. Nulla pharetra vitae turpis ut venenatis. Aliquam maximus urna nunc, sit amet posuere tellus fringilla nec.
Pellentesque viverra orci vel eros rhoncus, in feugiat elit laoreet. Donec sed nulla lorem. Donec sed ipsum eros. Vivamus metus dolor, tristique at ex sit amet, semper condimentum tortor. Vivamus et elementum libero. Phasellus laoreet lectus turpis, ac vestibulum urna finibus a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer nec rhoncus enim, et congue orci. Nam rutrum non mi id vulputate. Sed sit amet nisi varius, mollis turpis ut, suscipit nunc. Maecenas varius nibh ac volutpat venenatis.
Vivamus vitae scelerisque sem, id elementum ligula. Mauris tristique vitae metus et tincidunt. Integer at porta neque, eget tincidunt nunc. Donec non lobortis lacus. Aenean ac rhoncus mauris, quis congue leo. In vel condimentum risus, eget tincidunt nibh. In sollicitudin lacinia dui, quis tempus lorem faucibus ut. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Cras eu est vitae metus maximus tempus ut gravida odio.
Etiam ut faucibus arcu. Praesent ac congue urna. Integer suscipit erat at elit vulputate dignissim. Praesent ornare quis nisl eu efficitur. Morbi iaculis turpis nisl, non mattis dolor molestie nec. Nullam in erat quam. Quisque eros nunc, placerat sed enim a, vestibulum ultricies diam. Vestibulum tempus volutpat ullamcorper. Morbi semper purus ultricies diam molestie faucibus. Aliquam ullamcorper viverra purus vel vehicula. Pellentesque fermentum congue libero, laoreet lobortis dui commodo sit amet. Donec vel orci id lorem faucibus convallis nec in ipsum.
Morbi nec ipsum pulvinar, interdum justo eu, vestibulum nisl. Fusce tristique blandit lacus, a lacinia lacus consectetur nec. Sed hendrerit ornare urna tincidunt euismod. Sed venenatis felis ipsum, vitae euismod nisi iaculis eu. Quisque placerat id ipsum ut scelerisque. Quisque dignissim magna dignissim magna aliquam consectetur. Integer efficitur convallis arcu, et mollis magna eleifend id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eleifend luctus fermentum. Cras id nisl nec urna suscipit eleifend. LAST LINE OF TEXT.</div>
<div class="fixed">FIXED CONTENT HERE</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>

how to make middle div inside scrollable div stay on top when scrolling

I have a header (div), menu (div) & content (div) inside a container (scrollable div).
I'd like to set menu to stay at top of container only when scrolling down inside of the container (scrollable div)!!!.
Here is my code:
<div id="wrapper">
<div id="LangBar"/>
<div id="LeftFloat"/>
<div class="main" id="sb">**this is the CONTAINER (SCROLLABLE DIV)**
<div id="header">**this is the HEADER (DIV)**</div>
<div id="menu">**this is the MENU (DIV)**</div>
<div class="section">**this is the CONTENT (DIV)**</div>
<div id="footer"/>
</div>
<div id="RightFloat"/>
</div>
HERE IS MY JSFIDDLE
Please see my code: http://jsfiddle.net/aisinvon/4pEBm/5
Because you need menu stick only when scroll down, we can use jquery to do it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
.section {
height:1000px;
background: #ccc;
}
.main{
height: 500px;
overflow: scroll;
}
.fixed {
position:fixed;
top:0;
left:0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="LangBar" />
<div id="LeftFloat" />
<div class="main" id="sb">**this is the CONTAINER (SCROLLABLE DIV)**
<div id="header">**this is the HEADER (DIV)**</div>
<div id="menu">**this is the MENU (DIV)**</div>
<div class="section">**this is the CONTENT (DIV)**</div>
<div id="footer" />
</div>
<div id="RightFloat" />
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $menu = $('#menu'),
menuTop = $menu.offset().top;
$('#sb').scroll(function() {
var scrollTop = $('#sb').scrollTop();
if (scrollTop > menuTop) {
$menu.addClass('fixed');
} else {
$menu.removeClass('fixed');
}
});
});
</script>
</div>
</body>
</html>
Absolute position the 3 elements and set overflow:auto for the middle one like in this fiddle. http://jsfiddle.net/majinnaibu/p47mU/
CSS
html, body, #wrapper{
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
#wrapper{
background: #0f0;
}
#header{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 50px;
background: rgba(255,0,0,0.5);
}
#footer{
position: absolute;
height: 50px;
bottom: 0px;
left: 0px;
right: 0px;
background: rgba(0,0,255,0.5);
}
#content{
position: absolute;
overflow: auto;
top: 50px;
bottom: 50px;
}
HTML
<div id="wrapper">
<div id="header">
Header Content
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis neque ut turpis volutpat pretium. Donec luctus vel lectus eget condimentum. Aliquam interdum dignissim neque, eu pulvinar erat porta sit amet. Nam urna lectus, rhoncus eu ante ac, lobortis pretium velit. Phasellus vestibulum quam in elit dapibus imperdiet. Integer lobortis nec dolor sit amet accumsan. Sed nec faucibus mi, scelerisque mollis erat. Vivamus eu sapien ornare, posuere mi nec, mollis metus. Aenean convallis est ipsum, eget dignissim leo tincidunt eget. Praesent malesuada dolor vel lacus malesuada, at fermentum nunc eleifend. Integer est metus, dapibus sit amet enim in, posuere aliquam lorem. Vivamus convallis neque at odio convallis, ut sodales erat ultricies. Quisque et enim ac enim imperdiet consectetur. Etiam eget lectus nec lorem congue dictum. Nulla facilisi.
Quisque ligula dolor, pharetra et ante nec, blandit interdum risus. Mauris ultrices malesuada sem, a luctus diam auctor in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque purus magna, laoreet id malesuada non, blandit sed diam. Vivamus blandit faucibus mattis. Aliquam semper faucibus erat eu mollis. Donec eleifend leo lacus, sed aliquet nisi consequat ac.
Morbi dictum pharetra feugiat. In nec turpis dolor. Mauris consectetur hendrerit scelerisque. Aenean eleifend dui ac augue varius porttitor at a leo. Fusce semper mollis vulputate. Praesent libero enim, congue eget tellus vitae, mattis tempor turpis. Fusce cursus ligula quam, eget iaculis leo ullamcorper eget. Nam laoreet quam pulvinar, egestas justo id, cursus eros. Pellentesque congue porttitor pretium.
Suspendisse mattis sapien sed magna tempus ultrices. Nullam porta sagittis nulla ut venenatis. Nulla faucibus elementum elementum. Integer sed consectetur elit, quis elementum dolor. Donec dapibus aliquam orci eu pretium. Aliquam vel fermentum nunc. Duis augue mauris, semper at neque ac, aliquet mattis augue. Suspendisse pulvinar vehicula semper. Aenean purus orci, pharetra vel sollicitudin quis, tincidunt ac dolor.
Duis nibh tellus, iaculis vel venenatis sed, condimentum ac est. Sed ac imperdiet neque. Phasellus et euismod lorem. Nunc hendrerit orci mattis, tincidunt quam vel, varius mauris. Phasellus venenatis malesuada congue. Nam ut nunc eros. Nulla facilisi. Pellentesque facilisis massa a tortor imperdiet ullamcorper eget convallis nisl. Suspendisse potenti. Nam a congue est. Praesent id ante dui. In hac habitasse platea dictumst. Sed eget metus sit amet arcu pellentesque molestie ac eget mauris. Nullam adipiscing odio at interdum porttitor. Proin magna mi, facilisis ac rhoncus ac, gravida ut lacus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis neque ut turpis volutpat pretium. Donec luctus vel lectus eget condimentum. Aliquam interdum dignissim neque, eu pulvinar erat porta sit amet. Nam urna lectus, rhoncus eu ante ac, lobortis pretium velit. Phasellus vestibulum quam in elit dapibus imperdiet. Integer lobortis nec dolor sit amet accumsan. Sed nec faucibus mi, scelerisque mollis erat. Vivamus eu sapien ornare, posuere mi nec, mollis metus. Aenean convallis est ipsum, eget dignissim leo tincidunt eget. Praesent malesuada dolor vel lacus malesuada, at fermentum nunc eleifend. Integer est metus, dapibus sit amet enim in, posuere aliquam lorem. Vivamus convallis neque at odio convallis, ut sodales erat ultricies. Quisque et enim ac enim imperdiet consectetur. Etiam eget lectus nec lorem congue dictum. Nulla facilisi.
Quisque ligula dolor, pharetra et ante nec, blandit interdum risus. Mauris ultrices malesuada sem, a luctus diam auctor in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque purus magna, laoreet id malesuada non, blandit sed diam. Vivamus blandit faucibus mattis. Aliquam semper faucibus erat eu mollis. Donec eleifend leo lacus, sed aliquet nisi consequat ac.
Morbi dictum pharetra feugiat. In nec turpis dolor. Mauris consectetur hendrerit scelerisque. Aenean eleifend dui ac augue varius porttitor at a leo. Fusce semper mollis vulputate. Praesent libero enim, congue eget tellus vitae, mattis tempor turpis. Fusce cursus ligula quam, eget iaculis leo ullamcorper eget. Nam laoreet quam pulvinar, egestas justo id, cursus eros. Pellentesque congue porttitor pretium.
Suspendisse mattis sapien sed magna tempus ultrices. Nullam porta sagittis nulla ut venenatis. Nulla faucibus elementum elementum. Integer sed consectetur elit, quis elementum dolor. Donec dapibus aliquam orci eu pretium. Aliquam vel fermentum nunc. Duis augue mauris, semper at neque ac, aliquet mattis augue. Suspendisse pulvinar vehicula semper. Aenean purus orci, pharetra vel sollicitudin quis, tincidunt ac dolor.
Duis nibh tellus, iaculis vel venenatis sed, condimentum ac est. Sed ac imperdiet neque. Phasellus et euismod lorem. Nunc hendrerit orci mattis, tincidunt quam vel, varius mauris. Phasellus venenatis malesuada congue. Nam ut nunc eros. Nulla facilisi. Pellentesque facilisis massa a tortor imperdiet ullamcorper eget convallis nisl. Suspendisse potenti. Nam a congue est. Praesent id ante dui. In hac habitasse platea dictumst. Sed eget metus sit amet arcu pellentesque molestie ac eget mauris. Nullam adipiscing odio at interdum porttitor. Proin magna mi, facilisis ac rhoncus ac, gravida ut lacus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis neque ut turpis volutpat pretium. Donec luctus vel lectus eget condimentum. Aliquam interdum dignissim neque, eu pulvinar erat porta sit amet. Nam urna lectus, rhoncus eu ante ac, lobortis pretium velit. Phasellus vestibulum quam in elit dapibus imperdiet. Integer lobortis nec dolor sit amet accumsan. Sed nec faucibus mi, scelerisque mollis erat. Vivamus eu sapien ornare, posuere mi nec, mollis metus. Aenean convallis est ipsum, eget dignissim leo tincidunt eget. Praesent malesuada dolor vel lacus malesuada, at fermentum nunc eleifend. Integer est metus, dapibus sit amet enim in, posuere aliquam lorem. Vivamus convallis neque at odio convallis, ut sodales erat ultricies. Quisque et enim ac enim imperdiet consectetur. Etiam eget lectus nec lorem congue dictum. Nulla facilisi.
Quisque ligula dolor, pharetra et ante nec, blandit interdum risus. Mauris ultrices malesuada sem, a luctus diam auctor in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque purus magna, laoreet id malesuada non, blandit sed diam. Vivamus blandit faucibus mattis. Aliquam semper faucibus erat eu mollis. Donec eleifend leo lacus, sed aliquet nisi consequat ac.
Morbi dictum pharetra feugiat. In nec turpis dolor. Mauris consectetur hendrerit scelerisque. Aenean eleifend dui ac augue varius porttitor at a leo. Fusce semper mollis vulputate. Praesent libero enim, congue eget tellus vitae, mattis tempor turpis. Fusce cursus ligula quam, eget iaculis leo ullamcorper eget. Nam laoreet quam pulvinar, egestas justo id, cursus eros. Pellentesque congue porttitor pretium.
Suspendisse mattis sapien sed magna tempus ultrices. Nullam porta sagittis nulla ut venenatis. Nulla faucibus elementum elementum. Integer sed consectetur elit, quis elementum dolor. Donec dapibus aliquam orci eu pretium. Aliquam vel fermentum nunc. Duis augue mauris, semper at neque ac, aliquet mattis augue. Suspendisse pulvinar vehicula semper. Aenean purus orci, pharetra vel sollicitudin quis, tincidunt ac dolor.
Duis nibh tellus, iaculis vel venenatis sed, condimentum ac est. Sed ac imperdiet neque. Phasellus et euismod lorem. Nunc hendrerit orci mattis, tincidunt quam vel, varius mauris. Phasellus venenatis malesuada congue. Nam ut nunc eros. Nulla facilisi. Pellentesque facilisis massa a tortor imperdiet ullamcorper eget convallis nisl. Suspendisse potenti. Nam a congue est. Praesent id ante dui. In hac habitasse platea dictumst. Sed eget metus sit amet arcu pellentesque molestie ac eget mauris. Nullam adipiscing odio at interdum porttitor. Proin magna mi, facilisis ac rhoncus ac, gravida ut lacus.
</div>
<div id="footer">
Footer Content
</div>
</div>