Here's the fiddle: https://jsfiddle.net/Asatani/Lheu70jn/
I have recently decided to delve into the world of RWD and I am having trouble getting some things to work as expected. This particular issue is related to parallaxing a hero image at the top of my page. I understand how to make the image scale and it works exactly how I need it to, but the rest of the page will not shift up to fill the gap when I shrink the viewport. The hero image's position is relative with a width of 100vw and a height of 50vh. Immediately below that is a spacer div (with just a flat background color) to kind of frame the hero image. When viewed on my computer, it looks perfect. When viewed from my phone, the image is sized correctly, but the spacer is way down the page and will not adjust when the viewport adjusts.
HTML:
<body>
<div id="topbar">
<nav>
<ul>
<li>Home</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
</ul>
</nav>
</div>
<div class="background1"></div>
<div class="spacer"></div>
<article>
<p><span class="auto-style1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
porttitor nisl lectus, ac posuere purus faucibus eu. Maecenas a
ultricies risus. Ut id vulputate leo, sed fermentum velit. Duis id
tortor ac felis tincidunt varius. Duis non nulla erat. Vestibulum
dapibus, libero sit amet porttitor aliquam, dolor orci mollis augue,
id euismod nunc ipsum vitae libero. Phasellus ultricies eros in
finibus lobortis. Nunc interdum elit in sagittis pulvinar. Aliquam a
libero sit amet nisl lobortis ullamcorper. Vivamus elementum urna a
ullamcorper accumsan.<br>
Quisque neque arcu, gravida id luctus quis, tempor at quam. Etiam id
cursus risus. Mauris eu turpis in erat dignissim porta at ac tortor.
Curabitur quis auctor ipsum. Nulla neque diam, congue vel fringilla
at, vehicula vitae diam. Proin ut volutpat odio. Aliquam erat
volutpat.<br>
Donec in tempor dui. Nullam iaculis tempus porttitor. Phasellus vel
lectus auctor, mollis elit vel, sagittis nibh. Etiam ut sem id erat
sodales placerat. Etiam viverra tellus at nunc aliquam, ullamcorper
malesuada felis pharetra. Morbi gravida enim ut lectus bibendum
molestie. Pellentesque eget quam vulputate nibh maximus
pellentesque. Curabitur sed bibendum neque, et gravida est. Sed
pellentesque est nec eros cursus mollis. Phasellus vitae diam a mi
viverra finibus a nec orci.<br>
Quisque eu nisi vel urna finibus porta. Integer volutpat, enim non
hendrerit dignissim, ligula tortor maximus dolor, vel fermentum mi
metus nec enim. Nunc dictum sed urna sit amet luctus. Nulla suscipit
rhoncus erat, vel semper sem ultrices vitae. Nulla blandit odio at
justo interdum placerat. Maecenas eros tellus, molestie et metus
non, pulvinar bibendum elit. Donec dignissim est pharetra, auctor mi
ac, eleifend nulla. Nam non vestibulum nunc. Donec at massa metus.
Donec a facilisis nulla, tincidunt faucibus nunc. Maecenas velit
urna, hendrerit non orci in, euismod venenatis enim. Mauris
scelerisque venenatis nisl, ut lobortis nunc pretium sit amet. Sed
ac blandit nulla. Integer mattis rutrum mi et venenatis.<br>
Donec id fermentum nisi. Quisque vitae libero vestibulum, rutrum
nibh nec, finibus diam. Cras malesuada rhoncus dui, in vulputate
tellus tristique in. Integer vestibulum porta porttitor.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec placerat pulvinar cursus. Sed
ullamcorper sapien quis fringilla rutrum. Fusce et lacinia turpis,
vitae dapibus tellus. Quisque luctus ac erat vitae tempor.</span><br></p>
<p><span class="auto-style2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
porttitor nisl lectus, ac posuere purus faucibus eu. Maecenas a
ultricies risus. Ut id vulputate leo, sed fermentum velit. Duis id
tortor ac felis tincidunt varius. Duis non nulla erat. Vestibulum
dapibus, libero sit amet porttitor aliquam, dolor orci mollis augue,
id euismod nunc ipsum vitae libero. Phasellus ultricies eros in
finibus lobortis. Nunc interdum elit in sagittis pulvinar. Aliquam a
libero sit amet nisl lobortis ullamcorper. Vivamus elementum urna a
ullamcorper accumsan.<br>
Quisque neque arcu, gravida id luctus quis, tempor at quam. Etiam id
cursus risus. Mauris eu turpis in erat dignissim porta at ac tortor.
Curabitur quis auctor ipsum. Nulla neque diam, congue vel fringilla
at, vehicula vitae diam. Proin ut volutpat odio. Aliquam erat
volutpat.<br>
Donec in tempor dui. Nullam iaculis tempus porttitor. Phasellus vel
lectus auctor, mollis elit vel, sagittis nibh. Etiam ut sem id erat
sodales placerat. Etiam viverra tellus at nunc aliquam, ullamcorper
malesuada felis pharetra. Morbi gravida enim ut lectus bibendum
molestie. Pellentesque eget quam vulputate nibh maximus
pellentesque. Curabitur sed bibendum neque, et gravida est. Sed
pellentesque est nec eros cursus mollis. Phasellus vitae diam a mi
viverra finibus a nec orci.<br>
Quisque eu nisi vel urna finibus porta. Integer volutpat, enim non
hendrerit dignissim, ligula tortor maximus dolor, vel fermentum mi
metus nec enim. Nunc dictum sed urna sit amet luctus. Nulla suscipit
rhoncus erat, vel semper sem ultrices vitae. Nulla blandit odio at
justo interdum placerat. Maecenas eros tellus, molestie et metus
non, pulvinar bibendum elit. Donec dignissim est pharetra, auctor mi
ac, eleifend nulla. Nam non vestibulum nunc. Donec at massa metus.
Donec a facilisis nulla, tincidunt faucibus nunc. Maecenas velit
urna, hendrerit non orci in, euismod venenatis enim. Mauris
scelerisque venenatis nisl, ut lobortis nunc pretium sit amet. Sed
ac blandit nulla. Integer mattis rutrum mi et venenatis.<br>
Donec id fermentum nisi. Quisque vitae libero vestibulum, rutrum
nibh nec, finibus diam. Cras malesuada rhoncus dui, in vulputate
tellus tristique in. Integer vestibulum porta porttitor.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec placerat pulvinar cursus. Sed
ullamcorper sapien quis fringilla rutrum. Fusce et lacinia turpis,
vitae dapibus tellus. Quisque luctus ac erat vitae tempor.</span><br></p>
<p><span class="auto-style3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
porttitor nisl lectus, ac posuere purus faucibus eu. Maecenas a
ultricies risus. Ut id vulputate leo, sed fermentum velit. Duis id
tortor ac felis tincidunt varius. Duis non nulla erat. Vestibulum
dapibus, libero sit amet porttitor aliquam, dolor orci mollis augue,
id euismod nunc ipsum vitae libero. Phasellus ultricies eros in
finibus lobortis. Nunc interdum elit in sagittis pulvinar. Aliquam a
libero sit amet nisl lobortis ullamcorper. Vivamus elementum urna a
ullamcorper accumsan.<br>
Quisque neque arcu, gravida id luctus quis, tempor at quam. Etiam id
cursus risus. Mauris eu turpis in erat dignissim porta at ac tortor.
Curabitur quis auctor ipsum. Nulla neque diam, congue vel fringilla
at, vehicula vitae diam. Proin ut volutpat odio. Aliquam erat
volutpat.<br>
Donec in tempor dui. Nullam iaculis tempus porttitor. Phasellus vel
lectus auctor, mollis elit vel, sagittis nibh. Etiam ut sem id erat
sodales placerat. Etiam viverra tellus at nunc aliquam, ullamcorper
malesuada felis pharetra. Morbi gravida enim ut lectus bibendum
molestie. Pellentesque eget quam vulputate nibh maximus
pellentesque. Curabitur sed bibendum neque, et gravida est. Sed
pellentesque est nec eros cursus mollis. Phasellus vitae diam a mi
viverra finibus a nec orci.<br>
Quisque eu nisi vel urna finibus porta. Integer volutpat, enim non
hendrerit dignissim, ligula tortor maximus dolor, vel fermentum mi
metus nec enim. Nunc dictum sed urna sit amet luctus. Nulla suscipit
rhoncus erat, vel semper sem ultrices vitae. Nulla blandit odio at
justo interdum placerat. Maecenas eros tellus, molestie et metus
non, pulvinar bibendum elit. Donec dignissim est pharetra, auctor mi
ac, eleifend nulla. Nam non vestibulum nunc. Donec at massa metus.
Donec a facilisis nulla, tincidunt faucibus nunc. Maecenas velit
urna, hendrerit non orci in, euismod venenatis enim. Mauris
scelerisque venenatis nisl, ut lobortis nunc pretium sit amet. Sed
ac blandit nulla. Integer mattis rutrum mi et venenatis.<br>
Donec id fermentum nisi. Quisque vitae libero vestibulum, rutrum
nibh nec, finibus diam. Cras malesuada rhoncus dui, in vulputate
tellus tristique in. Integer vestibulum porta porttitor.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec placerat pulvinar cursus. Sed
ullamcorper sapien quis fringilla rutrum. Fusce et lacinia turpis,
vitae dapibus tellus. Quisque luctus ac erat vitae tempor.</span><br></p>
</article>
<article>
<p><span class="auto-style4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
porttitor nisl lectus, ac posuere purus faucibus eu. Maecenas a
ultricies risus. Ut id vulputate leo, sed fermentum velit. Duis id
tortor ac felis tincidunt varius. Duis non nulla erat. Vestibulum
dapibus, libero sit amet porttitor aliquam, dolor orci mollis augue,
id euismod nunc ipsum vitae libero. Phasellus ultricies eros in
finibus lobortis. Nunc interdum elit in sagittis pulvinar. Aliquam a
libero sit amet nisl lobortis ullamcorper. Vivamus elementum urna a
ullamcorper accumsan.<br>
Quisque neque arcu, gravida id luctus quis, tempor at quam. Etiam id
cursus risus. Mauris eu turpis in erat dignissim porta at ac tortor.
Curabitur quis auctor ipsum. Nulla neque diam, congue vel fringilla
at, vehicula vitae diam. Proin ut volutpat odio. Aliquam erat
volutpat.<br>
Donec in tempor dui. Nullam iaculis tempus porttitor. Phasellus vel
lectus auctor, mollis elit vel, sagittis nibh. Etiam ut sem id erat
sodales placerat. Etiam viverra tellus at nunc aliquam, ullamcorper
malesuada felis pharetra. Morbi gravida enim ut lectus bibendum
molestie. Pellentesque eget quam vulputate nibh maximus
pellentesque. Curabitur sed bibendum neque, et gravida est. Sed
pellentesque est nec eros cursus mollis. Phasellus vitae diam a mi
viverra finibus a nec orci.<br>
Quisque eu nisi vel urna finibus porta. Integer volutpat, enim non
hendrerit dignissim, ligula tortor maximus dolor, vel fermentum mi
metus nec enim. Nunc dictum sed urna sit amet luctus. Nulla suscipit
rhoncus erat, vel semper sem ultrices vitae. Nulla blandit odio at
justo interdum placerat. Maecenas eros tellus, molestie et metus
non, pulvinar bibendum elit. Donec dignissim est pharetra, auctor mi
ac, eleifend nulla. Nam non vestibulum nunc. Donec at massa metus.
Donec a facilisis nulla, tincidunt faucibus nunc. Maecenas velit
urna, hendrerit non orci in, euismod venenatis enim. Mauris
scelerisque venenatis nisl, ut lobortis nunc pretium sit amet. Sed
ac blandit nulla. Integer mattis rutrum mi et venenatis.<br>
Donec id fermentum nisi. Quisque vitae libero vestibulum, rutrum
nibh nec, finibus diam. Cras malesuada rhoncus dui, in vulputate
tellus tristique in. Integer vestibulum porta porttitor.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec placerat pulvinar cursus. Sed
ullamcorper sapien quis fringilla rutrum. Fusce et lacinia turpis,
vitae dapibus tellus. Quisque luctus ac erat vitae tempor.</span><br></p>
<p><span class="auto-style5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
porttitor nisl lectus, ac posuere purus faucibus eu. Maecenas a
ultricies risus. Ut id vulputate leo, sed fermentum velit. Duis id
tortor ac felis tincidunt varius. Duis non nulla erat. Vestibulum
dapibus, libero sit amet porttitor aliquam, dolor orci mollis augue,
id euismod nunc ipsum vitae libero. Phasellus ultricies eros in
finibus lobortis. Nunc interdum elit in sagittis pulvinar. Aliquam a
libero sit amet nisl lobortis ullamcorper. Vivamus elementum urna a
ullamcorper accumsan.<br>
Quisque neque arcu, gravida id luctus quis, tempor at quam. Etiam id
cursus risus. Mauris eu turpis in erat dignissim porta at ac tortor.
Curabitur quis auctor ipsum. Nulla neque diam, congue vel fringilla
at, vehicula vitae diam. Proin ut volutpat odio. Aliquam erat
volutpat.<br>
Donec in tempor dui. Nullam iaculis tempus porttitor. Phasellus vel
lectus auctor, mollis elit vel, sagittis nibh. Etiam ut sem id erat
sodales placerat. Etiam viverra tellus at nunc aliquam, ullamcorper
malesuada felis pharetra. Morbi gravida enim ut lectus bibendum
molestie. Pellentesque eget quam vulputate nibh maximus
pellentesque. Curabitur sed bibendum neque, et gravida est. Sed
pellentesque est nec eros cursus mollis. Phasellus vitae diam a mi
viverra finibus a nec orci.<br>
Quisque eu nisi vel urna finibus porta. Integer volutpat, enim non
hendrerit dignissim, ligula tortor maximus dolor, vel fermentum mi
metus nec enim. Nunc dictum sed urna sit amet luctus. Nulla suscipit
rhoncus erat, vel semper sem ultrices vitae. Nulla blandit odio at
justo interdum placerat. Maecenas eros tellus, molestie et metus
non, pulvinar bibendum elit. Donec dignissim est pharetra, auctor mi
ac, eleifend nulla. Nam non vestibulum nunc. Donec at massa metus.
Donec a facilisis nulla, tincidunt faucibus nunc. Maecenas velit
urna, hendrerit non orci in, euismod venenatis enim. Mauris
scelerisque venenatis nisl, ut lobortis nunc pretium sit amet. Sed
ac blandit nulla. Integer mattis rutrum mi et venenatis.<br>
Donec id fermentum nisi. Quisque vitae libero vestibulum, rutrum
nibh nec, finibus diam. Cras malesuada rhoncus dui, in vulputate
tellus tristique in. Integer vestibulum porta porttitor.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec placerat pulvinar cursus. Sed
ullamcorper sapien quis fringilla rutrum. Fusce et lacinia turpis,
vitae dapibus tellus. Quisque luctus ac erat vitae tempor.</span><br></p>
<p><span class="auto-style6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
porttitor nisl lectus, ac posuere purus faucibus eu. Maecenas a
ultricies risus. Ut id vulputate leo, sed fermentum velit. Duis id
tortor ac felis tincidunt varius. Duis non nulla erat. Vestibulum
dapibus, libero sit amet porttitor aliquam, dolor orci mollis augue,
id euismod nunc ipsum vitae libero. Phasellus ultricies eros in
finibus lobortis. Nunc interdum elit in sagittis pulvinar. Aliquam a
libero sit amet nisl lobortis ullamcorper. Vivamus elementum urna a
ullamcorper accumsan.<br>
Quisque neque arcu, gravida id luctus quis, tempor at quam. Etiam id
cursus risus. Mauris eu turpis in erat dignissim porta at ac tortor.
Curabitur quis auctor ipsum. Nulla neque diam, congue vel fringilla
at, vehicula vitae diam. Proin ut volutpat odio. Aliquam erat
volutpat.<br>
Donec in tempor dui. Nullam iaculis tempus porttitor. Phasellus vel
lectus auctor, mollis elit vel, sagittis nibh. Etiam ut sem id erat
sodales placerat. Etiam viverra tellus at nunc aliquam, ullamcorper
malesuada felis pharetra. Morbi gravida enim ut lectus bibendum
molestie. Pellentesque eget quam vulputate nibh maximus
pellentesque. Curabitur sed bibendum neque, et gravida est. Sed
pellentesque est nec eros cursus mollis. Phasellus vitae diam a mi
viverra finibus a nec orci.<br>
Quisque eu nisi vel urna finibus porta. Integer volutpat, enim non
hendrerit dignissim, ligula tortor maximus dolor, vel fermentum mi
metus nec enim. Nunc dictum sed urna sit amet luctus. Nulla suscipit
rhoncus erat, vel semper sem ultrices vitae. Nulla blandit odio at
justo interdum placerat. Maecenas eros tellus, molestie et metus
non, pulvinar bibendum elit. Donec dignissim est pharetra, auctor mi
ac, eleifend nulla. Nam non vestibulum nunc. Donec at massa metus.
Donec a facilisis nulla, tincidunt faucibus nunc. Maecenas velit
urna, hendrerit non orci in, euismod venenatis enim. Mauris
scelerisque venenatis nisl, ut lobortis nunc pretium sit amet. Sed
ac blandit nulla. Integer mattis rutrum mi et venenatis.<br>
Donec id fermentum nisi. Quisque vitae libero vestibulum, rutrum
nibh nec, finibus diam. Cras malesuada rhoncus dui, in vulputate
tellus tristique in. Integer vestibulum porta porttitor.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec placerat pulvinar cursus. Sed
ullamcorper sapien quis fringilla rutrum. Fusce et lacinia turpis,
vitae dapibus tellus. Quisque luctus ac erat vitae tempor.</span><br></p>
</article>
<article>
<p><span class="auto-style7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
porttitor nisl lectus, ac posuere purus faucibus eu. Maecenas a
ultricies risus. Ut id vulputate leo, sed fermentum velit. Duis id
tortor ac felis tincidunt varius. Duis non nulla erat. Vestibulum
dapibus, libero sit amet porttitor aliquam, dolor orci mollis augue,
id euismod nunc ipsum vitae libero. Phasellus ultricies eros in
finibus lobortis. Nunc interdum elit in sagittis pulvinar. Aliquam a
libero sit amet nisl lobortis ullamcorper. Vivamus elementum urna a
ullamcorper accumsan.<br>
Quisque neque arcu, gravida id luctus quis, tempor at quam. Etiam id
cursus risus. Mauris eu turpis in erat dignissim porta at ac tortor.
Curabitur quis auctor ipsum. Nulla neque diam, congue vel fringilla
at, vehicula vitae diam. Proin ut volutpat odio. Aliquam erat
volutpat.<br>
Donec in tempor dui. Nullam iaculis tempus porttitor. Phasellus vel
lectus auctor, mollis elit vel, sagittis nibh. Etiam ut sem id erat
sodales placerat. Etiam viverra tellus at nunc aliquam, ullamcorper
malesuada felis pharetra. Morbi gravida enim ut lectus bibendum
molestie. Pellentesque eget quam vulputate nibh maximus
pellentesque. Curabitur sed bibendum neque, et gravida est. Sed
pellentesque est nec eros cursus mollis. Phasellus vitae diam a mi
viverra finibus a nec orci.<br>
Quisque eu nisi vel urna finibus porta. Integer volutpat, enim non
hendrerit dignissim, ligula tortor maximus dolor, vel fermentum mi
metus nec enim. Nunc dictum sed urna sit amet luctus. Nulla suscipit
rhoncus erat, vel semper sem ultrices vitae. Nulla blandit odio at
justo interdum placerat. Maecenas eros tellus, molestie et metus
non, pulvinar bibendum elit. Donec dignissim est pharetra, auctor mi
ac, eleifend nulla. Nam non vestibulum nunc. Donec at massa metus.
Donec a facilisis nulla, tincidunt faucibus nunc. Maecenas velit
urna, hendrerit non orci in, euismod venenatis enim. Mauris
scelerisque venenatis nisl, ut lobortis nunc pretium sit amet. Sed
ac blandit nulla. Integer mattis rutrum mi et venenatis.<br>
Donec id fermentum nisi. Quisque vitae libero vestibulum, rutrum
nibh nec, finibus diam. Cras malesuada rhoncus dui, in vulputate
tellus tristique in. Integer vestibulum porta porttitor.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec placerat pulvinar cursus. Sed
ullamcorper sapien quis fringilla rutrum. Fusce et lacinia turpis,
vitae dapibus tellus. Quisque luctus ac erat vitae tempor.</span><br></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
porttitor nisl lectus, ac posuere purus faucibus eu. Maecenas a
ultricies risus. Ut id vulputate leo, sed fermentum velit. Duis id
tortor ac felis tincidunt varius. Duis non nulla erat. Vestibulum
dapibus, libero sit amet porttitor aliquam, dolor orci mollis augue,
id euismod nunc ipsum vitae libero. Phasellus ultricies eros in
finibus lobortis. Nunc interdum elit in sagittis pulvinar. Aliquam a
libero sit amet nisl lobortis ullamcorper. Vivamus elementum urna a
ullamcorper accumsan.<br>
Quisque neque arcu, gravida id luctus quis, tempor at quam. Etiam id
cursus risus. Mauris eu turpis in erat dignissim porta at ac tortor.
Curabitur quis auctor ipsum. Nulla neque diam, congue vel fringilla
at, vehicula vitae diam. Proin ut volutpat odio. Aliquam erat
volutpat.<br>
Donec in tempor dui. Nullam iaculis tempus porttitor. Phasellus vel
lectus auctor, mollis elit vel, sagittis nibh. Etiam ut sem id erat
sodales placerat. Etiam viverra tellus at nunc aliquam, ullamcorper
malesuada felis pharetra. Morbi gravida enim ut lectus bibendum
molestie. Pellentesque eget quam vulputate nibh maximus
pellentesque. Curabitur sed bibendum neque, et gravida est. Sed
pellentesque est nec eros cursus mollis. Phasellus vitae diam a mi
viverra finibus a nec orci.<br>
Quisque eu nisi vel urna finibus porta. Integer volutpat, enim non
hendrerit dignissim, ligula tortor maximus dolor, vel fermentum mi
metus nec enim. Nunc dictum sed urna sit amet luctus. Nulla suscipit
rhoncus erat, vel semper sem ultrices vitae. Nulla blandit odio at
justo interdum placerat. Maecenas eros tellus, molestie et metus
non, pulvinar bibendum elit. Donec dignissim est pharetra, auctor mi
ac, eleifend nulla. Nam non vestibulum nunc. Donec at massa metus.
Donec a facilisis nulla, tincidunt faucibus nunc. Maecenas velit
urna, hendrerit non orci in, euismod venenatis enim. Mauris
scelerisque venenatis nisl, ut lobortis nunc pretium sit amet. Sed
ac blandit nulla. Integer mattis rutrum mi et venenatis.<br>
Donec id fermentum nisi. Quisque vitae libero vestibulum, rutrum
nibh nec, finibus diam. Cras malesuada rhoncus dui, in vulputate
tellus tristique in. Integer vestibulum porta porttitor.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec placerat pulvinar cursus. Sed
ullamcorper sapien quis fringilla rutrum. Fusce et lacinia turpis,
vitae dapibus tellus. Quisque luctus ac erat vitae tempor.<br></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
porttitor nisl lectus, ac posuere purus faucibus eu. Maecenas a
ultricies risus. Ut id vulputate leo, sed fermentum velit. Duis id
tortor ac felis tincidunt varius. Duis non nulla erat. Vestibulum
dapibus, libero sit amet porttitor aliquam, dolor orci mollis augue,
id euismod nunc ipsum vitae libero. Phasellus ultricies eros in
finibus lobortis. Nunc interdum elit in sagittis pulvinar. Aliquam a
libero sit amet nisl lobortis ullamcorper. Vivamus elementum urna a
ullamcorper accumsan.<br>
Quisque neque arcu, gravida id luctus quis, tempor at quam. Etiam id
cursus risus. Mauris eu turpis in erat dignissim porta at ac tortor.
Curabitur quis auctor ipsum. Nulla neque diam, congue vel fringilla
at, vehicula vitae diam. Proin ut volutpat odio. Aliquam erat
volutpat.<br>
Donec in tempor dui. Nullam iaculis tempus porttitor. Phasellus vel
lectus auctor, mollis elit vel, sagittis nibh. Etiam ut sem id erat
sodales placerat. Etiam viverra tellus at nunc aliquam, ullamcorper
malesuada felis pharetra. Morbi gravida enim ut lectus bibendum
molestie. Pellentesque eget quam vulputate nibh maximus
pellentesque. Curabitur sed bibendum neque, et gravida est. Sed
pellentesque est nec eros cursus mollis. Phasellus vitae diam a mi
viverra finibus a nec orci.<br>
Quisque eu nisi vel urna finibus porta. Integer volutpat, enim non
hendrerit dignissim, ligula tortor maximus dolor, vel fermentum mi
metus nec enim. Nunc dictum sed urna sit amet luctus. Nulla suscipit
rhoncus erat, vel semper sem ultrices vitae. Nulla blandit odio at
justo interdum placerat. Maecenas eros tellus, molestie et metus
non, pulvinar bibendum elit. Donec dignissim est pharetra, auctor mi
ac, eleifend nulla. Nam non vestibulum nunc. Donec at massa metus.
Donec a facilisis nulla, tincidunt faucibus nunc. Maecenas velit
urna, hendrerit non orci in, euismod venenatis enim. Mauris
scelerisque venenatis nisl, ut lobortis nunc pretium sit amet. Sed
ac blandit nulla. Integer mattis rutrum mi et venenatis.<br>
Donec id fermentum nisi. Quisque vitae libero vestibulum, rutrum
nibh nec, finibus diam. Cras malesuada rhoncus dui, in vulputate
tellus tristique in. Integer vestibulum porta porttitor.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec placerat pulvinar cursus. Sed
ullamcorper sapien quis fringilla rutrum. Fusce et lacinia turpis,
vitae dapibus tellus. Quisque luctus ac erat vitae tempor.<br></p>
</article>
</body>
CSS:
html {
margin: 90px 0 0 0;
padding: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #fff;
color: #000;
}
#topbar {
top: 0;
height: 100px;
width: 100%;
position: fixed;
background:url(../images/header_logo.png) left 25px top 10px no-repeat, url(../images/header_bg.png) center bottom repeat-x;
z-index: 50;
}
nav {
}
nav ul {
padding-top: 15px;
padding-left: 200px;
list-style:none;
}
nav ul li{
display:block;
float:left;
padding:3px 15px;
}
nav ul li a {
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
transition: all .25s ease;
color: #fff;
}
nav ul li a:hover {
color: #00f;
}
article {
background: #fff;
}
aside {
}
feed {
}
footer {
}
a {
color: #00f;
}
a:active {
}
.spacer {
width: 100%;
height: 70px;
background-color: #1588cc;
}
.background1 {
background-image: url("https://bhope.caria.com/images/bridges_hero.jpg");
background-repeat: no-repeat;
background-position: center -200px;
background-size: cover;
position: relative;
width: 100vw;
height: 50vh;
clear: both;
z-index: -1;
}
.background2 {
background-image: url("1");
background-repeat: no-repeat;
background-position: 97% top;
background-size: 10%;
position: fixed;
top: 0;
width: 100vw;
height: 100vw;
z-index: -1;
}
.background3 {
background-image: url("2");
background-repeat: no-repeat;
background-position: 5% top;
background-size: 50%;
position: fixed;
top: 0;
width: 100vw;
height: 100vw;
z-index: -1;
}
.auto-style1 {
color: #FF0000;
}
.auto-style2 {
color: #00FF00;
}
.auto-style3 {
color: #0000FF;
}
.auto-style4 {
color: #FFFF00;
}
.auto-style5 {
color: #FF00FF;
}
.auto-style6 {
color: #00FFFF;
}
.auto-style7 {
color: #008080;
}
Related
I have added a border around my page which should stay fixed even when the page scrolls.
How do I remove the small gap between the red border and the edge of page??
body::before {
content: '';
position: fixed;
top: 5px;
left: 10px;
right: 10px;
bottom: 10px;
border: 15px solid red;
padding: 0px;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor, purus non hendrerit bibendum, mauris nisi maximus metus, sit amet commodo augue purus quis lorem. Nullam laoreet nibh nisi, eu suscipit libero varius id. Nunc lobortis odio eu tempor vulputate. Sed placerat nisi gravida lorem laoreet congue. Nam blandit faucibus molestie. Sed tempus mi a arcu eleifend, ut malesuada elit ultricies. Sed odio leo, tempus non accumsan nec, condimentum viverra arcu. Nullam accumsan, elit sed vulputate ultricies, elit lorem interdum lectus, ut feugiat ipsum diam sed nulla. Etiam et pharetra turpis. Duis accumsan quam sit amet interdum blandit. Sed auctor hendrerit mauris ac vestibulum. Nam at dapibus lacus, non mattis turpis. Suspendisse potenti. Quisque vel condimentum enim, quis tincidunt purus. Fusce cursus odio non venenatis dictum. Maecenas felis felis, blandit a dictum ut, blandit sed justo.
Vestibulum placerat placerat elit eget auctor. Suspendisse auctor massa eros, a lobortis leo faucibus a. Pellentesque mi nibh, efficitur vitae dignissim quis, egestas luctus ante. Maecenas at blandit tellus. Sed eleifend, erat commodo sollicitudin egestas, nisl ante sollicitudin sem, eu venenatis nisi mauris at orci. Aliquam erat volutpat. Phasellus nulla augue, dapibus et sem ac, vestibulum ultricies risus. Donec ut lectus risus. Mauris tincidunt, ipsum quis rhoncus scelerisque, quam augue molestie eros, dapibus gravida neque diam in quam. Sed vulputate ante ut tortor rhoncus maximus. Curabitur id facilisis leo, ac suscipit orci. Fusce auctor neque quis fringilla pretium.
Cras nec eros id est ullamcorper consequat. Quisque pellentesque venenatis pretium. Sed a ullamcorper massa. Morbi eget rutrum nisl. Nullam semper tellus ut purus lacinia ornare. Quisque sagittis auctor erat, sed volutpat turpis. Suspendisse vehicula faucibus lectus, nec iaculis turpis mattis ut. Aliquam dapibus felis lectus, sit amet mattis nunc ullamcorper quis. Nam dictum nibh ac pretium vehicula. Cras porta in neque nec convallis. Cras libero tellus, luctus id velit vel, molestie egestas nunc. Morbi vitae dolor metus. Donec vitae interdum sem, vitae condimentum ante. Cras in turpis et nisl tincidunt vehicula.
Sed ut magna commodo, iaculis velit vel, cursus velit. Curabitur nunc sem, maximus et ullamcorper in, venenatis vel sapien. Praesent vulputate, purus sit amet rhoncus lacinia, urna lectus venenatis dui, in elementum velit quam nec urna. Curabitur quis efficitur sem. Proin id feugiat mi. Duis sed diam vitae tortor mollis auctor vitae non erat. Aenean pulvinar accumsan luctus. Fusce at massa suscipit, gravida risus ut, laoreet tortor. Praesent vitae purus elit. Praesent feugiat augue eu tellus scelerisque, vel fringilla ligula suscipit.
Nulla ac elementum neque. Integer tincidunt sollicitudin cursus. Proin a lacus augue. Etiam scelerisque scelerisque commodo. Nulla eros felis, aliquet at tincidunt in, vulputate sit amet libero. Mauris sed vulputate urna, ac consectetur lacus. Duis eget lorem blandit, laoreet velit in, sagittis augue. Vestibulum ut erat quis ipsum aliquam fermentum. Ut varius odio lacus, ut dictum dolor laoreet non. Donec feugiat dictum magna, mollis mattis nibh bibendum quis. Sed ornare risus vel massa tristique, vel iaculis enim aliquet. Sed mauris erat, faucibus sit amet hendrerit eget, suscipit sed neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
this should work fine !!
body::before {
content: '';
position: fixed;
top: 0vh;
left: 0vw;
right: 0vw;
bottom:0vh;
border: 15px solid red;
}
try adding this to your css, the browser, by default adds some margin and padding to every container
* {margin: 0!important; padding:0!important;}
then you will have to add margins and paddings you need them
I am trying to fix this footer. If i remove positon it works fine but some other pages still have a problem. I need this footer at the bottom of every page...
footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 16px;
background:white;
}
<footer>
<div class="container text-center"> <span>Copyright © 2017 LeagueOn. all rights reserved </span> </div>
</footer>
Try to avoid position: absolute where you don't really need it.
You can achieve this via flexbox. Your footer should be direct child of body:
body {
margin: 0;
display: flex;
flex-direction: column;
height: 100vh; /* min-height: 100vh will also work everywhere except IE */
}
footer {
/* move footer to the bottom */
margin-top: auto;
}
/* This styles are just for demo */
body {
background-color: lightsteelblue;
}
footer {
background-color: lime;
padding: 16px;
text-align: center;
}
<footer>Copyright © 2017 LeagueOn. all rights reserved</footer>
This will work even in case of long page:
body {
margin: 0;
display: flex;
flex-direction: column;
height: 100vh; /* min-height: 100vh will also work everywhere except IE */
}
footer {
/* move footer to the bottom */
margin-top: auto;
}
/* This styles are just for demo */
body {
background-color: lightsteelblue;
}
footer {
background-color: lime;
padding: 16px;
text-align: center;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales molestie orci vitae facilisis. Duis non urna eget felis blandit facilisis vel sit amet purus. Donec finibus ex eget ultrices ultricies. Sed porttitor lobortis mi dignissim lacinia. Phasellus eget iaculis mauris, quis placerat augue. Quisque luctus condimentum neque, sed feugiat ipsum sagittis at. Mauris ut commodo eros.
Sed vel faucibus lacus, efficitur dapibus lectus. Sed consectetur luctus odio. Sed tempus aliquet enim, ac ullamcorper augue tincidunt at. Pellentesque vehicula iaculis elit eleifend viverra. Etiam scelerisque maximus felis. Aenean mollis nisl non eros faucibus mattis. Phasellus dictum venenatis ex vel ultricies.
Suspendisse auctor, nunc at ullamcorper hendrerit, dui enim laoreet nisl, id ullamcorper elit ex in lorem. Ut malesuada ipsum et euismod fermentum. Etiam euismod feugiat lacus eget luctus. Sed tempor vestibulum lectus. Suspendisse tincidunt ut massa ac interdum. Pellentesque mattis sapien in augue imperdiet, vel imperdiet massa convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum nec consectetur nunc.
Mauris vel sodales ex. Aenean at lectus non libero sagittis aliquam nec eget nisi. Proin massa tortor, iaculis in ante ut, hendrerit sodales sem. Aenean blandit vestibulum dolor et viverra. Mauris non nunc eget odio vulputate viverra. Morbi sagittis nisl at risus convallis vestibulum. Aenean pellentesque sit amet nibh id lobortis.
Ut consequat ligula risus, sit amet congue dolor consequat maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur ultrices tellus at placerat hendrerit. Fusce ullamcorper ante id urna scelerisque, eget interdum libero feugiat. Sed consectetur eget metus et euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Maecenas malesuada interdum mauris, tempor porttitor odio porttitor eu. Vestibulum sollicitudin justo velit, nec porttitor risus luctus non. Fusce tempor dapibus magna a luctus. Donec ex turpis, venenatis vulputate lacus in, pharetra auctor nisi. Pellentesque dictum elit ut mollis vehicula. Donec vulputate suscipit felis vitae accumsan. Ut fermentum aliquam ipsum sit amet condimentum. Phasellus sollicitudin ligula elit, in efficitur leo dignissim a. Quisque dignissim dolor malesuada interdum interdum.
Nulla congue nibh erat, et tincidunt nulla maximus id. Duis placerat suscipit ex. Integer ut tortor sapien. Vestibulum dapibus sed ex at pharetra. Aliquam blandit facilisis erat. Proin imperdiet cursus arcu, non congue neque tempor nec. Maecenas ut nibh semper, dictum velit sit amet, vehicula nisl. Nullam ac tempor libero. Donec elit lorem, luctus et maximus in, iaculis sed neque. Duis vehicula lacus vitae eros congue, at molestie nisi eleifend. Nulla erat diam, dapibus eu consectetur et, rutrum non quam. Duis imperdiet laoreet elit ac varius. Nulla ultricies pellentesque libero, eget tincidunt tortor elementum quis.
Morbi vitae pharetra ante. Aenean maximus rutrum nunc, eget tempor nunc. Aenean nisi erat, egestas a rhoncus ut, tempus non nisl. Donec venenatis aliquam pulvinar. Sed in tortor neque. Fusce sollicitudin arcu vitae justo faucibus, sit amet sodales neque suscipit. Aliquam in sollicitudin diam. Donec a eros magna. Quisque vel posuere ipsum, quis vehicula odio. Morbi non dolor velit. Vivamus varius velit purus, bibendum volutpat magna eleifend ut. Quisque imperdiet pharetra nunc, id efficitur eros interdum sit amet. Sed commodo maximus risus et iaculis.
Fusce facilisis hendrerit leo. Donec a justo vel velit pellentesque congue et convallis sem. Nullam et urna justo. Donec aliquet mi ac turpis lacinia, in faucibus nunc tempor. Mauris at magna vitae ex volutpat blandit. Integer sed faucibus odio, in congue turpis. Vivamus pellentesque condimentum sagittis. Aliquam fermentum consequat massa non imperdiet.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris pellentesque interdum arcu, at tempor tortor tincidunt sed. Aliquam quis odio rhoncus, pharetra ligula vitae, tempus ante. Aenean ultrices ultrices purus eu interdum. Nullam malesuada dui sit amet enim feugiat dignissim. Vestibulum purus orci, fermentum vitae augue ac, semper scelerisque lectus. Etiam congue erat nec eleifend dapibus. Vestibulum vel mattis lacus. Proin urna nunc, sollicitudin quis volutpat varius, posuere vitae elit. Mauris felis ex, elementum et venenatis at, sagittis at quam. Donec nec pulvinar metus. Morbi sit amet tortor tortor.
Sed cursus fermentum nibh, ac fringilla ante dignissim non. Morbi in hendrerit lacus. Nam pulvinar ultricies dolor vitae ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent at neque sapien. Nam nisi velit, porta nec ultricies venenatis, semper sit amet mauris. Praesent sagittis ullamcorper lorem, imperdiet eleifend nisl vehicula quis. Cras ut vulputate metus. Ut in congue enim, vel efficitur tortor.
Integer velit erat, fringilla tincidunt porttitor gravida, pulvinar nec elit. Pellentesque ornare porttitor lorem ut congue. Pellentesque sagittis libero in est tristique feugiat. Suspendisse et ex fringilla dui tincidunt iaculis. Etiam a mollis enim, in scelerisque orci. Sed accumsan viverra nunc, a varius tellus molestie malesuada. Nam nec fringilla tellus, sed facilisis tortor. Nulla sed est sed orci tincidunt tincidunt. Morbi luctus imperdiet mi, eget molestie purus venenatis vel.
Integer venenatis dignissim nisi vel dignissim. Mauris vitae maximus felis, et tincidunt eros. Vivamus luctus scelerisque ligula, nec semper turpis volutpat ut. Ut vestibulum nisi vel justo iaculis, sed congue ante vulputate. Maecenas suscipit, mi at pulvinar tempus, nisl lorem molestie massa, ac vestibulum risus neque sit amet purus. Cras ultrices vulputate eros, a volutpat urna luctus ac. Curabitur viverra nunc in mauris mattis, pretium faucibus nibh convallis. Vivamus fermentum magna consectetur velit condimentum finibus. Vestibulum luctus dolor ut elit dictum, sed posuere ligula aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt nisi tellus, nec iaculis tellus feugiat nec. Vivamus sodales molestie velit, quis porta augue rhoncus ac. Sed elementum mi in est venenatis, vitae posuere risus imperdiet.
Pellentesque scelerisque id urna iaculis interdum. Nulla cursus nibh at quam pretium mattis. Quisque at elit metus. Sed pellentesque, lacus et placerat tincidunt, orci metus rutrum ante, pharetra iaculis urna ipsum ac ipsum. Ut maximus ante sit amet finibus vestibulum. Nam lacinia tellus vehicula, gravida tellus vitae, maximus lacus. Integer placerat enim et fringilla commodo.
Cras non accumsan erat, vel dapibus velit. Sed eu dolor tellus. Integer varius mauris nibh, quis pharetra magna congue non. Aliquam libero nisl, suscipit eu congue id, tristique in magna. Maecenas rutrum magna non tincidunt convallis. Aliquam aliquam, mi ut dictum rhoncus, nisl neque lobortis tortor, at mattis odio eros ut justo. Vestibulum egestas risus nec nisl placerat maximus. Nunc orci purus, egestas at rutrum id, eleifend semper erat. In hac habitasse platea dictumst. Vivamus diam ipsum, aliquam ut placerat ac, ultrices nec arcu. Integer eu ultrices dolor, non luctus orci. Proin sodales pulvinar dui, et sollicitudin tellus dapibus nec. Praesent quis consectetur eros, non ornare tortor.
Curabitur vitae lorem vitae est scelerisque facilisis vitae non augue. Duis erat metus, iaculis a velit et, iaculis vehicula nisl. Mauris tristique pellentesque suscipit. Maecenas a nisl dui. In lacus justo, fringilla ut tortor non, dignissim aliquet nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam non lectus libero. Proin consequat eleifend justo. Praesent dolor enim, fringilla ut accumsan sit amet, egestas et augue. Nunc mattis dolor quis sodales tempus.
Integer sed ornare dolor. Quisque id dapibus tortor. Quisque ornare, ex quis consequat porttitor, arcu justo aliquet diam, in sollicitudin odio sem laoreet dolor. Ut elit dolor, semper vitae consectetur rutrum, finibus in felis. Nunc volutpat quam ut ligula varius volutpat. Nunc porttitor dictum libero et facilisis. Nam a libero a nisi aliquet mollis. Integer eget ipsum accumsan, interdum elit sit amet, ultrices massa. Nullam nec est id lorem dignissim aliquet nec at urna. Maecenas ante lorem, rutrum ac commodo ac, viverra quis enim. Etiam convallis sapien eu leo dignissim condimentum. Morbi ut ex eu enim fermentum varius at non turpis. Nulla sed libero pharetra, ornare mi sit amet, scelerisque odio. Mauris sit amet mi non mi ornare commodo. Proin eget lacinia erat. Nunc dictum lobortis justo sed vulputate.
Proin ullamcorper finibus nisi egestas aliquam. Sed tempor ornare massa at semper. Integer ultrices diam a libero fringilla faucibus. Proin vitae leo nec neque laoreet imperdiet. Donec mattis gravida massa ac blandit. Aliquam et accumsan urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam rhoncus elementum est nec iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et sapien orci. Vestibulum ut venenatis velit. Sed sodales volutpat risus vel aliquam. In hac habitasse platea dictumst.
Sed tempus nibh tempus bibendum viverra. Maecenas sit amet magna pretium, pharetra nisl at, ullamcorper elit. Integer ipsum diam, laoreet at consectetur at, rutrum eu mi. Duis et neque mauris. Pellentesque consequat augue et tortor commodo ornare. Nulla sed dui non sem vehicula bibendum vitae nec nibh. Curabitur ut arcu lacus. Donec vel orci dolor. Nam vel nibh a turpis ultricies dapibus rhoncus sit amet lorem. Aliquam condimentum mollis aliquam. Pellentesque laoreet vitae mauris id ornare. In id malesuada nisi.
Phasellus eu aliquam magna, sed efficitur dui. Morbi sagittis tellus vitae velit lacinia, ac molestie massa accumsan. Nullam molestie odio non turpis bibendum rutrum. Donec pellentesque nunc in massa ultrices, a pulvinar ex porta. Curabitur pretium placerat eleifend. Vivamus in dolor id dolor dapibus scelerisque. Etiam pretium placerat laoreet.
Nam at varius nibh, nec ullamcorper tellus. Vivamus ut metus sit amet ligula lobortis ultrices. Vestibulum sed metus id tortor pellentesque dignissim sit amet quis tellus. Integer porta laoreet massa. Fusce tincidunt eros sed neque egestas tristique. Donec eleifend elit volutpat purus sagittis gravida ut vitae purus. Suspendisse a neque id enim euismod egestas et in arcu. Vivamus placerat nulla vel ex dapibus, nec rutrum risus imperdiet. Nam aliquet felis vel turpis varius venenatis. Curabitur a tempus velit, eget vulputate dolor. Nullam feugiat risus risus, in finibus mauris egestas eu.
Donec arcu ligula, pulvinar eu dapibus ut, viverra id ante. Integer in tempus leo, quis finibus felis. Sed sollicitudin libero quis mi vehicula, et blandit tellus porttitor. In in interdum leo. Pellentesque blandit nisi eu quam tempus, vel bibendum augue accumsan. Nam eget suscipit magna, sit amet lacinia velit. Nullam tincidunt, quam a lobortis pharetra, arcu velit pulvinar risus, quis fermentum erat lacus ut neque. Aenean ex elit, feugiat semper vestibulum sed, porttitor at massa.
Proin turpis metus, commodo porta sem non, faucibus hendrerit magna. Nulla sodales gravida quam ac aliquet. Nam posuere lobortis ultricies. Nulla ac odio venenatis, tempor lorem at, varius diam. Suspendisse malesuada lacus vel sapien malesuada, quis faucibus urna eleifend. Donec aliquam erat ut est pellentesque suscipit. Nunc diam lorem, semper et porttitor vitae, commodo eget nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec eu dapibus lorem. Aenean auctor, risus vel efficitur fringilla, neque ex elementum augue, eget aliquam arcu risus quis ligula. Sed viverra mauris tortor, ut tempus risus luctus vitae. Vestibulum tincidunt blandit tortor, eu scelerisque nisl pulvinar et. Ut placerat odio urna, at consequat risus sagittis ac. Fusce imperdiet, enim ut commodo auctor, lectus ante efficitur velit, sed ullamcorper dui purus eu nunc. Nam in mauris venenatis, pretium tortor a, accumsan metus.
Donec efficitur suscipit metus id ullamcorper. Etiam ipsum eros, luctus ut maximus non, pellentesque ut dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor leo eu dolor pulvinar, at rutrum nulla volutpat. Curabitur quis mollis augue. Nunc porttitor suscipit odio, laoreet facilisis mi luctus convallis. Nunc urna purus, mattis at sollicitudin eget, pharetra quis sapien. Sed porttitor, lacus sed posuere aliquam, quam odio pellentesque ante, sed volutpat est justo sit amet purus. Aenean consequat condimentum tellus, in sagittis dolor molestie quis. Aenean eget enim sem. Vivamus rutrum mi in magna rutrum, vitae euismod lorem pulvinar. Quisque viverra urna odio, eu tristique orci ultricies eu. Nam facilisis malesuada mattis. Ut tempor nibh eu sapien pellentesque facilisis. Aenean fringilla urna ut lorem viverra, quis condimentum elit iaculis.
Nullam aliquam, leo nec iaculis maximus, nisl nulla pretium leo, vitae iaculis nunc mi sit amet ante. Donec ullamcorper velit vitae dictum placerat. Nulla facilisi. Donec lobortis ut diam et pulvinar. Pellentesque suscipit suscipit aliquet. Nulla et pharetra tellus, nec semper erat. Praesent metus mauris, accumsan ut tempus ut, dignissim eget ante. Nulla eget diam sit amet enim luctus interdum. Quisque volutpat, enim vitae sollicitudin fermentum, odio metus fermentum ante, nec ultrices augue dolor eu eros. Nam eu venenatis dui. Vivamus volutpat accumsan nibh, in tincidunt lorem commodo sit amet.
Ut rhoncus, nunc ut lacinia vulputate, nisi purus efficitur massa, id suscipit ex felis nec mauris. Cras malesuada sapien et congue consectetur. Mauris molestie nisl vel purus convallis rutrum. Sed tristique dictum consectetur. Curabitur justo ante, semper sit amet ultrices at, placerat at lacus. Aenean lorem quam, tempor nec arcu nec, viverra ornare mi. Aenean ante velit, vestibulum non libero a, ullamcorper vulputate lectus. Aenean congue, metus ac lobortis dignissim, elit nunc interdum magna, eu sagittis neque mi vitae nibh. Etiam eget lacus quam. Duis quis augue eget eros congue molestie eget at dui.
<footer>Copyright © 2017 LeagueOn. all rights reserved</footer>
https://jsfiddle.net/p7e9vzu5/
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
header {
flex: 0;
}
main {
flex: 1 0 auto;
}
footer {
flex: 0;
}
Whenever a third element is introduced within the body, with a vertical layout, a horizontal scrollbar is added. If the third element is removed, case in point, the footer, the layout functions properly. I'm attempting to create a sticky footer using flexbox.
Browsers:
Chrome 57.0.2987.37
Chrome 58.0.3009.0
Firefox 51.0.1
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
I think the issue is with the width: 100vw; property in the footer. When I removed it the scroll bar was removed.
footer {
padding: 25px 10px;
text-align: right;
background: deeppink;
flex: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-flow: column;
flex-wrap: wrap;
background: var(--background-colour);
box-sizing: border-box;
min-height: 100vh;
}
header {
flex: 0;
background: deepskyblue;
padding: 25px 10px;
}
main {
flex: 1 0 auto;
}
footer {
padding: 25px 10px;
text-align: right;
background: deeppink;
flex: 0;
box-sizing: border-box;
}
<header>Header</header>
<main>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla viverra aliquam massa, a faucibus velit egestas vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut mauris at nisl ullamcorper rutrum quis eu ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse accumsan nulla sit amet nunc venenatis luctus. Vestibulum vestibulum eros velit, vel fermentum dolor scelerisque et. Proin dictum odio ante, eleifend auctor risus suscipit sit amet. Morbi at odio nec ligula placerat sodales ut eu nibh. Aenean ornare velit vitae nulla bibendum condimentum. Quisque porta et arcu ut gravida. Aenean sed lectus non orci convallis consectetur. Donec eget odio et leo dapibus vehicula. Morbi cursus lectus nec sem sagittis laoreet. Etiam fringilla lorem magna, nec blandit lorem malesuada condimentum. Etiam at ligula ac dui aliquam finibus vitae in ex. Sed feugiat aliquam nulla sagittis hendrerit. Nam et mauris justo. Proin volutpat ut nunc ut venenatis. Aliquam sagittis quam at purus fringilla sollicitudin. Integer condimentum venenatis quam, vitae congue justo viverra at. Praesent consequat porttitor justo, quis molestie ante ullamcorper vitae. Cras sit amet facilisis est. Morbi ut arcu quam. Duis vehicula nisl nec magna dignissim condimentum. Morbi scelerisque iaculis nisi ut sollicitudin. Sed vehicula erat lectus, vitae consequat est facilisis in. Suspendisse suscipit nec urna et posuere. Donec et ultricies turpis, vel volutpat sapien. Praesent hendrerit sit amet velit in fringilla. Suspendisse sollicitudin mi molestie libero lobortis condimentum. Phasellus dictum velit nec leo convallis, eu feugiat urna venenatis. Ut facilisis, ligula vel convallis varius, turpis neque pretium ante, eget hendrerit tortor magna in lacus. Nam velit dolor, iaculis vitae felis non, egestas porttitor lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam hendrerit, ante at accumsan commodo, sem odio pharetra arcu, vitae ultrices enim ante eu nunc. Sed at lectus placerat, tincidunt ante non, volutpat arcu. Pellentesque ultrices, tellus in dictum finibus, lacus justo vehicula lacus, in lobortis nunc libero rutrum nulla. In hac habitasse platea dictumst. Curabitur facilisis facilisis tellus sed mattis. Suspendisse pharetra vitae purus porttitor congue. Cras lobortis nisl at urna mattis mattis. Vivamus sagittis pharetra libero sed sollicitudin. Mauris consectetur tempor leo, sit amet sagittis ligula blandit et. Ut sit amet gravida risus. Nullam mauris enim, ornare vel quam vel, molestie viverra leo. Maecenas condimentum nec tellus quis iaculis. Mauris eros dui, efficitur non erat nec, convallis tristique elit. Phasellus sodales est ac purus blandit tristique. Sed aliquam est egestas, consequat nunc at, finibus mi. Nullam euismod diam magna, ac imperdiet mauris iaculis sed. Aenean porta eros nisi, ut mollis dui imperdiet ut. In vulputate sem dignissim consectetur pellentesque. Pellentesque lacinia magna venenatis ligula pulvinar, ac placerat lectus dignissim. Sed eget condimentum nulla, sed scelerisque erat. In tempor, lacus ut tempus bibendum, ligula augue mattis urna, sit amet lacinia ex arcu nec arcu. Pellentesque faucibus varius dolor eu pretium. Nam sit amet nisi ultricies, eleifend metus in, pretium enim. Praesent ac diam sed ante interdum tempor quis non eros. Maecenas mattis libero id lorem sollicitudin porttitor. Duis ac purus non risus interdum pretium ut id erat. Aliquam vel mi sit amet ligula pretium hendrerit. Donec ut urna magna. Phasellus mi eros, aliquam sit amet tincidunt et, egestas id velit. Donec bibendum leo blandit, commodo lorem a, tincidunt magna. Praesent fringilla aliquam ultricies. Aenean et lacus sapien. Ut sit amet semper magna. Aenean tristique ex eget elementum iaculis. Fusce condimentum malesuada mauris at cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum id quam tellus. Morbi egestas velit a orci auctor faucibus. Etiam dapibus ligula varius tempor ultricies. Quisque pretium ullamcorper nibh sed pharetra. Proin fringilla odio et tristique molestie. Nam et lorem cursus, egestas nisl ac, dignissim justo. Duis metus mauris, bibendum nec sem et, ultrices venenatis lorem. In congue metus auctor augue pellentesque, id tempor augue congue. Nam arcu sem, varius ac rutrum nec, sodales in lectus. Aenean dictum orci nibh, quis iaculis massa gravida non. Sed euismod magna id viverra ultrices. Vivamus fermentum ligula sed mauris convallis, eu ornare eros dictum. Etiam in nunc ac metus faucibus finibus. Duis vehicula augue sit amet lacinia posuere. Donec accumsan egestas iaculis. Quisque gravida, metus non faucibus cursus, mi odio luctus nisi, id gravida diam quam ac enim. Nullam malesuada purus lacinia ultrices ultricies. Sed rhoncus sapien id lectus feugiat, sit amet sollicitudin libero dictum. Donec consectetur consectetur sodales. Pellentesque facilisis dui et nisi pretium, at dapibus mi malesuada. Cras cursus sem eu nisi ornare, in mattis nibh euismod. Proin ut tristique orci. Duis viverra mauris neque, in ullamcorper risus pulvinar et. Etiam sagittis, sapien id tincidunt euismod, nibh nisi sagittis nisl, ac pharetra diam tellus nec lectus. Integer sagittis euismod placerat. Quisque lobortis condimentum ipsum et auctor. Aenean sit amet massa lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dolor massa, feugiat eu nisl id, convallis mollis urna. Ut non felis in metus gravida finibus. Sed turpis lacus, bibendum luctus condimentum ac, porta a ex. Nunc porta auctor nisi id eleifend. Duis et arcu iaculis, cursus mauris sit amet, porttitor turpis. Nunc eleifend fermentum libero, ac pharetra ex sodales quis. Etiam cursus, dui ac dignissim varius, massa urna fermentum lorem, et volutpat turpis lacus id lectus. Aliquam faucibus tempus metus. Vivamus convallis aliquet aliquet. Suspendisse malesuada massa ac justo hendrerit efficitur. Quisque quis luctus ex, sit amet rhoncus massa. Etiam iaculis massa et risus facilisis, egestas vehicula lacus tempus. Sed bibendum nisl in velit varius tempus. Curabitur fermentum, nunc quis porta euismod, diam purus convallis quam, non tempus massa arcu id purus. Fusce vel eleifend lectus. Phasellus auctor odio at ultrices volutpat. Morbi tristique, libero pellentesque dictum ullamcorper, purus arcu venenatis ante, a eleifend lorem nisi a mi. Quisque pretium enim id sagittis vulputate. Suspendisse finibus magna quis enim finibus, gravida euismod ex fermentum. Donec sollicitudin mauris sed odio dapibus tincidunt. Proin feugiat, magna et fermentum dapibus, lacus dui tincidunt sapien, et fringilla velit nisl non mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in feugiat lectus. Proin venenatis pulvinar lorem, ut consequat dolor. Nunc sit amet velit sem. Fusce dictum hendrerit massa, sit amet dapibus velit vehicula ut. Maecenas sed nulla ultricies, consectetur augue eget, mollis nunc. Donec quis est venenatis, dignissim velit sed, mollis felis. Suspendisse id eros non dui interdum tincidunt. Cras nisl nunc, accumsan quis pretium quis, porttitor et elit. Integer gravida ac leo a eleifend. Fusce in posuere quam. Nunc elementum urna fringilla quam euismod, nec ultricies nunc facilisis. Morbi rutrum blandit magna, sollicitudin ullamcorper enim malesuada vitae. Aliquam pellentesque, leo a ultrices cursus, orci urna dapibus lorem, nec convallis massa metus in nisi. Nulla vel odio eu urna pellentesque mattis id a odio. Duis facilisis lacus erat, id dapibus dui laoreet eu. Pellentesque malesuada quam magna, a vehicula felis hendrerit quis. Aliquam lacinia vitae libero ac lacinia. Integer in elit orci. Donec nec augue feugiat, vulputate turpis non, mattis tellus. Nam vitae fermentum odio. Vestibulum accumsan rhoncus tellus, eget hendrerit augue. Vestibulum ut volutpat felis. Maecenas blandit laoreet nunc in tempus. Phasellus et rhoncus massa. Nunc varius turpis quis elit iaculis, vitae ornare nibh tincidunt. In at velit vel enim posuere iaculis et ac massa. Sed non nulla eget elit volutpat tempus. Phasellus vel massa metus. Nam vestibulum urna mi, vitae blandit nisl imperdiet nec. Sed auctor, lacus at molestie dapibus, nulla nisl pretium augue, ut faucibus leo felis ac mi. Nullam eget lacus metus. Nunc imperdiet risus metus, et vehicula nulla gravida ut. Sed faucibus lacus vel nibh tristique fermentum. Sed id iaculis nisl. Pellentesque quis nulla ullamcorper lacus molestie bibendum quis non odio. Ut neque mauris, mollis at auctor ac, cursus vitae urna. Nunc in erat et purus volutpat luctus eget eu metus. Fusce consequat, lectus ut scelerisque lacinia, enim diam tempor odio, ac hendrerit erat eros ac ipsum. Praesent pharetra felis non finibus dignissim. Quisque ullamcorper, dui sit amet dapibus dignissim, enim elit semper mauris, quis fringilla sapien felis nec nisl. Vestibulum sed viverra justo. Phasellus quis tempus lorem, vitae aliquam metus. In faucibus eleifend nisi, ac rhoncus velit dignissim eget. Mauris at cursus dolor. Nam ac leo urna. Proin varius facilisis tellus tristique faucibus. Nam fermentum ac enim non cursus. Sed mattis non enim sit amet euismod. Vivamus vitae egestas enim, pulvinar iaculis tellus. Donec condimentum non dui et tempor. Sed sit amet massa congue, hendrerit felis quis, tempor mi. Nam ornare dui sit amet nisl tempor, eu commodo erat rhoncus. Ut non aliquet libero. Maecenas tempus, massa quis congue semper, lacus libero gravida neque, id auctor velit dolor nec quam. Sed egestas tincidunt urna sit amet consectetur. Nam consequat orci lobortis tellus aliquam interdum. Suspendisse accumsan molestie urna id blandit. Vivamus hendrerit ex sapien, a varius ligula sagittis ac. Duis a massa sodales ex pharetra commodo at non dui. Donec aliquam nec erat in tempor. In hac habitasse platea dictumst. Vivamus et neque sed diam bibendum iaculis vel efficitur velit. Etiam sagittis in dui lobortis accumsan. Maecenas consectetur, enim nec tincidunt hendrerit, enim lacus sodales nibh, at blandit lectus elit sed nisi. Ut finibus eget justo ac tristique. Quisque placerat, nisi a euismod condimentum, velit tortor blandit est, sit amet hendrerit nisl eros a dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse eleifend risus quis turpis maximus, et volutpat quam bibendum. Ut cursus interdum leo vel pulvinar. Nulla id accumsan erat. Aliquam sodales mattis ipsum in congue. Praesent gravida massa id semper pharetra. Integer aliquam mauris non ullamcorper pellentesque. Aliquam eros velit, gravida sed dapibus id, finibus nec lectus. Pellentesque finibus mauris sed eleifend posuere. Curabitur faucibus et dolor sed tempor. Ut congue justo non nulla fringilla, in vehicula turpis tincidunt. Aliquam pretium mi a elit auctor, non ultricies justo pulvinar. Nullam sodales vehicula odio, ut eleifend ipsum laoreet sit amet. Nunc eget placerat ante. Praesent eros tellus, laoreet a purus nec, iaculis placerat justo. Cras aliquam velit vitae urna iaculis commodo. Nunc nisl odio, bibendum sed mi quis, suscipit dignissim lorem. Duis at tellus metus. Mauris sodales nisl eget nisl mollis elementum. Vestibulum dignissim viverra lacinia. Proin vitae sapien massa. Cras quis sapien sodales, dictum urna consequat, varius diam. Sed rhoncus vulputate enim feugiat ullamcorper. Sed ligula mauris, vestibulum ut erat eu, tempor imperdiet ante. Etiam quam massa, tempor eu sem semper, rhoncus viverra lacus. Suspendisse ultrices metus in sem ultrices ultrices. Curabitur et elit ligula. Pellentesque a placerat erat. Morbi scelerisque lobortis tellus, a feugiat dolor dignissim vitae. Quisque facilisis odio sem, ac facilisis velit sagittis nec. Morbi efficitur nunc id est viverra, eu maximus est efficitur. Cras feugiat nunc ac purus fringilla, et dictum urna vehicula. Curabitur vestibulum mollis sagittis. Etiam tincidunt turpis vitae mi porttitor, in vestibulum mauris sodales. Donec vel elit nulla. Curabitur sagittis augue egestas, pulvinar elit ac, vehicula orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus semper risus tempus, ultricies ligula sed, lacinia dui. Donec ullamcorper, magna a commodo vulputate, sem ligula molestie augue, at egestas quam massa eu felis. Sed tempus dictum tellus a tempus. Ut pharetra tellus tincidunt nisi porttitor, vitae laoreet leo laoreet. Suspendisse potenti. Etiam eget aliquam ligula. Fusce a vestibulum neque. Pellentesque a erat vehicula, interdum eros vulputate, rhoncus tortor. Duis quis suscipit mi. Nam eleifend, eros quis bibendum tincidunt, mi nisi ultrices elit, nec ultrices lacus sem quis nisi. Integer vulputate ultricies orci at viverra. In vitae faucibus massa. Sed laoreet sed leo at lobortis. Quisque ut ultrices mauris. Pellentesque sed tristique elit. Quisque sit amet enim a libero euismod fermentum. Proin ut dignissim felis. Praesent aliquam magna ut posuere malesuada. In eget velit in turpis auctor fermentum faucibus vel dolor. Phasellus enim eros, consequat quis ipsum quis, pellentesque consequat dolor. Sed tortor ligula, sollicitudin eu malesuada in, ullamcorper a odio. Sed rutrum, massa et viverra volutpat, orci justo elementum enim, vel vulputate ipsum sapien at libero. Ut facilisis, dolor et hendrerit fringilla, arcu diam congue enim, eget pulvinar lectus augue a urna. Ut semper facilisis mauris et posuere. Aenean in eleifend dui. Donec gravida, turpis eget posuere accumsan, neque lacus semper orci, a ornare dolor neque et nunc. Maecenas at lacus sagittis lectus rutrum vestibulum. Aenean efficitur ipsum vel sagittis fringilla. Vestibulum sollicitudin elit id nunc ullamcorper sodales. Etiam auctor auctor quam, at porttitor arcu laoreet vitae. Aliquam eget elementum dui. Suspendisse erat ipsum, sagittis in tempus non, pulvinar ut augue. Morbi sem libero, ornare non feugiat in, sagittis in odio. Morbi mollis placerat felis. Suspendisse facilisis quis enim ac vulputate. Nunc ut arcu nec nibh volutpat feugiat. Maecenas vel arcu volutpat nibh commodo consequat quis a augue. Proin imperdiet semper velit non tempus. Maecenas vitae libero eu turpis placerat tempor. Nulla maximus elit id enim aliquam, nec tempus lectus porttitor. Duis ultricies arcu purus, ac finibus lacus lacinia gravida. Nunc vel quam mattis, dictum massa vitae, tincidunt lectus. Integer dignissim dolor tortor, nec bibendum dui malesuada et. Cras cursus, turpis vel pretium vehicula, nisl ante congue felis, at pulvinar massa nulla sed odio. Integer facilisis lectus metus, vel tempus risus mattis at. Ut vulputate consequat nunc, ac venenatis augue semper ac. Vestibulum non suscipit orci, nec efficitur urna. Pellentesque porttitor vitae lorem vitae porttitor. Nunc vel massa elit. Integer sapien nulla, pharetra a egestas ut, euismod bibendum massa. Duis tempor lorem vel eros venenatis, ac pellentesque purus venenatis. Ut velit ex, posuere vitae enim quis, porttitor hendrerit nulla. Fusce vulputate consequat dui et placerat. Integer vitae viverra magna, vel iaculis diam. Nullam suscipit ex id porta condimentum. Ut quis sapien ut augue imperdiet pretium vitae eu magna. Etiam vulputate vestibulum pretium. Nulla facilisi. Donec congue tristique ligula at tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at sem eros. Maecenas id sapien eget nisi vestibulum tincidunt vel quis lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce porttitor sem sollicitudin ipsum aliquet porttitor. Fusce vel elit bibendum, fermentum neque condimentum, maximus elit. Nunc interdum, lectus non euismod eleifend, velit felis varius purus, in consectetur urna massa in augue. Proin viverra arcu at nunc tincidunt, ut facilisis ante ultricies. Nulla eget ultrices tortor. Aenean tristique volutpat elit, sed congue ex facilisis sed. Proin lacus metus, sodales at scelerisque at, rutrum at libero. Fusce mauris nibh, sollicitudin faucibus neque lobortis, mollis mollis ex. Nam varius pellentesque enim, eu posuere ligula accumsan sit amet. Mauris pharetra tellus ut odio pharetra, at cursus metus rutrum. Fusce id commodo turpis, eget maximus purus. Nullam ante elit, porttitor at consequat id, sodales varius tortor. Phasellus ut cursus nulla, et pharetra leo. Ut ut ultricies lorem. Donec id enim consequat ex viverra mattis non ac augue. In hac habitasse platea dictumst. Maecenas sollicitudin, neque vel blandit condimentum, ligula elit fermentum nunc, sollicitudin facilisis risus urna et diam. Vestibulum in diam eget tortor congue commodo sed id neque. Praesent in libero vel nunc sagittis euismod. In ut libero dui. Sed porttitor risus eu elementum finibus. Vivamus nulla est, malesuada vel imperdiet eu, porta a massa. Fusce nec imperdiet augue. Etiam interdum ac sapien eget convallis. Duis tincidunt ante at nisi malesuada, sed ultrices nibh bibendum. Mauris euismod tempor rutrum. Donec sit amet eros ipsum. Donec eget massa at mi fermentum luctus ut vel libero. Morbi malesuada libero sit amet aliquet congue. Maecenas sagittis interdum nisi at dapibus. Duis vitae quam vitae mauris imperdiet rhoncus porta eu purus. Nullam est odio, imperdiet a odio ac, eleifend lobortis erat. Nullam eu aliquam urna, in suscipit ante. Ut gravida ex non laoreet porttitor. Pellentesque dictum ex at sagittis vestibulum. Suspendisse tincidunt nibh id est tincidunt facilisis. Pellentesque tortor risus, commodo ac porta sed, lobortis eu ligula. Sed augue arcu, tempor posuere venenatis sit amet, placerat in diam. In neque erat, sollicitudin vel nisl ut, lobortis venenatis lacus. Praesent vel cursus quam, non vestibulum mi. Ut condimentum lobortis velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ut consequat justo, sed tincidunt augue. Ut aliquet nibh non ipsum posuere lacinia. Fusce laoreet metus massa, non consequat ipsum fringilla ut. Etiam vel velit quis dolor lobortis porta. Sed ullamcorper arcu vitae rutrum euismod. Suspendisse massa leo, interdum eget porttitor et, lacinia eget massa. Proin euismod purus in ullamcorper porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus elit ipsum, dignissim ac ullamcorper eget, rutrum eget velit. Sed elementum eu turpis id fermentum. Sed sollicitudin, lectus in blandit finibus, augue diam condimentum ante, id sagittis lectus nulla interdum libero. Maecenas mattis ipsum id tincidunt consequat. Praesent dui lectus, pellentesque vel interdum in, posuere ut lacus. Duis faucibus at ex non tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer nibh nisl, bibendum at tempus quis, rutrum quis tellus. Ut ut interdum justo, in sodales ex. Pellentesque sit amet congue ex. Cras vitae dolor efficitur, tincidunt tellus vitae, congue orci. Integer mollis sollicitudin ultrices. Mauris non lobortis quam. Morbi mollis sagittis lacinia. Aenean id pellentesque enim, sed cursus nunc. Curabitur dignissim, nunc ac luctus tempor, erat nisi aliquam justo, sed auctor mauris lectus in turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum condimentum felis eu nulla vehicula, a placerat magna dapibus. Cras quis molestie est. Quisque hendrerit euismod lacus, sit amet scelerisque eros pulvinar eu. Nam fringilla ipsum ac nisl facilisis mollis. Vivamus pretium elit ac suscipit gravida. Suspendisse consequat pharetra tincidunt. Nulla ut odio eget purus pellentesque molestie. Duis pretium leo vitae ipsum condimentum, eget commodo orci maximus. Donec sed nunc sit amet ex consequat maximus ac nec arcu. Aliquam et volutpat erat, eget vestibulum lacus. Donec lacinia accumsan sapien vel condimentum. Nam scelerisque semper lectus, eu luctus velit gravida a. Sed fringilla laoreet odio, in tincidunt dui interdum at. Praesent laoreet lorem non nunc ultrices egestas. Vestibulum hendrerit neque et quam tempus vehicula. Nunc ex purus, lacinia vel tincidunt nec, vestibulum sed nulla. Nam ac fermentum orci, sit amet porttitor turpis. Integer nec est vestibulum, porttitor massa id, dictum sapien. Donec sed ex porta, bibendum enim sit amet, efficitur metus. Aliquam elementum magna a dui ullamcorper dictum. Phasellus dignissim lobortis mauris eu dapibus. Ut egestas eros a tincidunt aliquam. Etiam dapibus ipsum turpis, sed viverra eros elementum nec. Suspendisse auctor leo orci, a pharetra leo porttitor ac. Curabitur laoreet dolor eget sem ullamcorper, ut semper felis feugiat. Etiam gravida eros quis diam hendrerit venenatis. Quisque hendrerit laoreet felis nec sodales. Curabitur vel arcu tempus risus fermentum varius at ut mauris. Integer ultricies pellentesque lobortis. Aenean finibus velit sagittis eleifend ultricies. Fusce elementum orci vitae mauris gravida, quis cursus dui posuere. Duis ligula elit, varius vel risus nec, accumsan dapibus orci. Curabitur eros odio, eleifend ac condimentum nec, fermentum in nibh. Curabitur tristique purus quis sapien rhoncus, eget placerat dui malesuada. Vivamus facilisis euismod libero, et mattis massa commodo sit amet. Proin varius aliquet nisl. Aenean nec turpis pharetra, faucibus mauris fringilla, commodo dui. Vestibulum ante massa, pellentesque fringilla lobortis sagittis, mattis sed nisi. Suspendisse fringilla feugiat felis, sed tincidunt quam porttitor non. Vestibulum diam turpis, dapibus cursus quam eu, accumsan viverra mi. Sed consequat nibh at purus vestibulum suscipit. Nunc vestibulum, justo vestibulum tempor ornare, ligula mauris vestibulum neque, at sagittis lectus velit at nisl. Curabitur cursus euismod tortor, eget pharetra massa euismod nec. Nullam vitae suscipit turpis, imperdiet luctus ante. Fusce aliquam, mauris eget iaculis vulputate, magna dolor mollis neque, hendrerit ultrices tellus mauris id sapien. Fusce sed sodales sapien, ut iaculis augue. Curabitur ac diam sit amet velit porttitor tristique. Mauris metus elit, vestibulum sit amet blandit consequat, mattis non nulla. Sed tristique, neque eget dapibus scelerisque, risus est blandit magna, a commodo orci turpis rutrum magna. Duis id posuere odio. Donec porttitor, nunc ut faucibus ornare, neque ex tincidunt nulla, at molestie erat turpis at ligula. Mauris nunc quam, elementum in lorem ac, hendrerit tempus elit. Phasellus venenatis nisl non sem posuere semper. Curabitur in justo id purus vehicula varius eget eget nunc. Proin eget ultrices leo. Nullam in efficitur felis. Pellentesque risus orci, bibendum eget accumsan sit amet, fringilla et nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce finibus lorem nec mi rutrum, quis vulputate orci malesuada. Ut laoreet, justo eget malesuada varius, nulla felis bibendum erat, at tincidunt quam tellus id eros. Pellentesque ac tellus rutrum, accumsan sem at, iaculis libero. Fusce in magna est. Nunc velit ante, imperdiet sit amet mi nec, tincidunt viverra est. Morbi tellus dolor, ultricies a sapien id, scelerisque interdum urna. Vivamus quis purus augue. Duis risus sem, suscipit quis varius eget, malesuada ut nulla. Nunc imperdiet diam elementum lorem egestas egestas. Morbi bibendum tortor in vehicula egestas. Vivamus ac velit eu nibh varius egestas mollis congue dolor. Mauris accumsan, dolor eget facilisis pellentesque, purus lorem condimentum turpis, eget placerat lectus risus ut enim. Mauris lacinia mattis convallis. Maecenas varius nisl sed sapien scelerisque porttitor. Proin vitae ullamcorper nulla, eget placerat tellus. Maecenas vitae varius arcu, non sagittis turpis. Pellentesque consectetur mauris sem, a maximus felis efficitur non. Suspendisse blandit placerat sem vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis ut nisi quis fermentum. Curabitur nec lorem a risus laoreet porta. Etiam volutpat nunc eu scelerisque pellentesque. Curabitur tristique dolor dignissim, faucibus libero ut, scelerisque urna. Proin tempus nibh id sollicitudin tincidunt. Integer lobortis a massa et lobortis. Donec posuere lacus sit amet erat dictum hendrerit. Aenean sed pellentesque leo, vitae dignissim lectus. Proin euismod risus velit. Aenean id magna vitae lacus posuere rutrum eleifend non mauris. Nulla egestas, nisi a placerat aliquet, felis tortor aliquet velit, quis feugiat erat ipsum in arcu. Praesent tristique lectus sapien, ac consequat mauris lobortis vitae. In sit amet elit sapien. Nam posuere commodo elit vitae venenatis. Duis a auctor nibh. Curabitur in dui lorem. Fusce eu hendrerit metus. Vestibulum quis rhoncus nisl. Donec sit amet molestie dui. Suspendisse at malesuada lacus, sed mattis massa. Quisque a urna id diam semper fringilla sit amet in orci. Etiam lorem mi, facilisis ultrices nulla sed, mollis vehicula eros. Donec et dictum turpis. Vivamus nec mauris semper, posuere lorem eget, varius tellus. Vivamus eget leo luctus, egestas ex a, laoreet ipsum. Praesent non gravida nisi. Sed consectetur, risus nec consectetur fringilla, est justo pulvinar mauris, a gravida ex libero a mauris. Nunc commodo, augue sed pretium pulvinar, ipsum ipsum efficitur dui, vitae hendrerit sem neque at turpis. In et lorem id nisl finibus rhoncus. Sed nec varius libero. Cras lobortis, nibh in ornare scelerisque, quam nisi pharetra nibh, ut finibus diam nulla hendrerit nisl. Morbi sit amet justo mattis, lacinia leo et, mattis arcu. Maecenas orci lorem, molestie a consectetur sollicitudin, suscipit vitae tellus. Sed in urna quis augue accumsan placerat. Vivamus viverra lectus nec risus scelerisque efficitur. Fusce ac orci quis enim fermentum imperdiet sed eget justo. Cras mollis urna purus, quis luctus nisi rhoncus nec. Maecenas sagittis lectus id rutrum fermentum. Proin ut hendrerit massa. In in turpis ut enim convallis molestie sed in diam. Morbi venenatis mauris neque, ut efficitur metus dictum at. In at odio elementum nunc accumsan mollis et eu felis. Proin ac dolor id nulla blandit eleifend nec a ante. Suspendisse potenti. Donec nec vehicula libero. Mauris turpis arcu, luctus nec vestibulum congue, sodales et odio. Aliquam erat volutpat. Nulla vel tempor lorem. Proin nibh nunc, facilisis sed bibendum laoreet, pellentesque ut risus. Mauris sodales pulvinar ultrices. Maecenas viverra velit orci, lobortis pulvinar ipsum iaculis eu. Ut viverra commodo justo ac consectetur. Donec quis elit dui. Aliquam sed pellentesque purus. Vestibulum vitae enim quis nulla auctor varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin ullamcorper tortor turpis, eget fringilla nunc molestie in. Nulla facilisi. Etiam ultricies rhoncus purus, condimentum ultrices velit maximus aliquet. Praesent accumsan sem lorem, ut luctus sem mattis sit amet. Morbi vel pretium sem, vitae porttitor nibh. Nullam condimentum ut odio ut maximus. Sed nec mauris vitae felis interdum eleifend. Nulla eros leo, placerat vel congue vel, feugiat nec ex. Praesent sed sollicitudin felis, id euismod nulla. Vestibulum tempus magna vitae felis suscipit, id finibus est viverra. In vitae mattis urna, quis ultrices nisi. Morbi vel elit ut erat facilisis faucibus vel in diam. Phasellus non euismod libero. Donec augue lacus, elementum sed pretium ut, eleifend ut neque. Duis id est tellus. Donec malesuada eu quam at sollicitudin. Pellentesque eget metus mi. Sed eu est ultrices, malesuada felis vitae, aliquam eros. Aliquam at aliquet dui. Vivamus ornare mi sit amet tristique tempus. Maecenas sed mi mauris. Integer in risus sed erat rutrum dapibus. Ut lobortis sagittis leo non pharetra. Proin consequat volutpat molestie. Morbi hendrerit ligula non odio varius iaculis. Nulla pharetra leo libero, in sodales nunc bibendum vitae. Curabitur mattis tincidunt pulvinar. Suspendisse blandit leo arcu, in mattis massa pretium eu. Donec hendrerit urna libero, sed dictum erat mollis non. Pellentesque lacus libero, tempus euismod consequat non, faucibus a dolor. Vestibulum consequat sapien luctus sem consectetur pulvinar. Phasellus auctor, nisi vitae volutpat viverra, dui nibh scelerisque arcu, ac gravida nulla massa ut libero. Pellentesque placerat nunc non pharetra ultrices. Duis elit lacus, auctor venenatis lorem a, rutrum hendrerit libero. Donec tellus enim, aliquet in tellus vel, sollicitudin feugiat erat. Nulla facilisi. Curabitur porta turpis eget nulla tincidunt, ut cursus urna ornare. In tristique ornare urna, eget maximus justo euismod ac. Sed porta ultricies dui, nec tincidunt nunc blandit quis. Suspendisse rutrum nisl nec euismod imperdiet. Etiam aliquam, diam sed dapibus bibendum, tortor sem laoreet ante, sit amet sollicitudin est justo eu sem.
</main>
<footer>Footer</footer>
On OS X scrollbars in the browser have native platform styling. I'd actually like to have this style also on other platforms. I know it's possible on Chrome to customize the look of the scrollbars. Is there any way I can achieve the "OS X look" using CSS on other platforms in Chrome?
since you are working on an app in a webkit based device it's worth taking a look at https://css-tricks.com/custom-scrollbars-in-webkit/
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
<html>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis magna eget efficitur viverra. Vestibulum feugiat felis maximus condimentum blandit. Etiam fringilla urna non libero malesuada pretium. Nulla facilisi. Nam finibus lacinia dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam eros a tellus rhoncus, sit amet efficitur est sollicitudin. Donec id felis nec sem tempus tempus. Vestibulum convallis elit non rutrum commodo.
Nullam viverra consequat est eu fringilla. Nunc ut turpis vulputate, scelerisque sem sed, mattis ligula. Nullam eu arcu ultrices, sagittis urna in, gravida velit. Nullam porta tempor mauris ac molestie. Nunc et orci interdum erat efficitur condimentum quis ut nulla. Donec accumsan tincidunt congue. Cras sollicitudin sit amet metus rhoncus convallis. Vestibulum scelerisque augue sit amet sapien varius venenatis. Sed non orci in dui varius tincidunt nec ac lectus. Suspendisse blandit, neque in efficitur posuere, augue risus aliquet sem, id sagittis turpis nisi non erat. Duis est lectus, egestas sit amet suscipit eu, ultricies non nisi. Phasellus dui lacus, iaculis eget condimentum vel, pulvinar placerat tortor. Etiam pellentesque leo nec egestas dictum.
Quisque euismod sodales est ac aliquet. Pellentesque porttitor mi aliquet cursus maximus. Nullam tincidunt non diam interdum laoreet. Aenean vel cursus odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque cursus, nibh quis semper tempor, felis justo dignissim turpis, eget accumsan leo nisl viverra sapien. Vestibulum quis vestibulum turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur mauris ante, mollis eget iaculis ut, feugiat non dui. Nullam quis mi ornare, porta metus quis, accumsan augue. Curabitur accumsan tempus aliquam. Vestibulum elementum at lectus in auctor. Donec consectetur eleifend purus consectetur pellentesque.
Ut porttitor est at magna laoreet, sit amet vestibulum sem suscipit. Vivamus eget erat congue, tincidunt tellus et, elementum augue. Nulla sit amet est iaculis, elementum massa sit amet, bibendum enim. Duis mollis, velit et hendrerit dictum, ligula tortor laoreet dui, eget aliquet felis dolor sed massa. Suspendisse potenti. Fusce iaculis nisl non velit bibendum, quis placerat nisi interdum. Maecenas faucibus ligula non pulvinar laoreet. Fusce sagittis massa ut lorem facilisis, in ullamcorper velit tristique. Morbi a facilisis elit. Sed blandit nulla at scelerisque scelerisque.
Praesent rhoncus tincidunt diam quis auctor. Maecenas blandit commodo commodo. Pellentesque quis dolor id urna maximus tristique vitae id lectus. Phasellus convallis accumsan nibh ac ornare. Pellentesque hendrerit ex in rutrum ultrices. Aenean nisi eros, bibendum non metus ac, tincidunt hendrerit lorem. Cras feugiat, augue et auctor auctor, felis libero sagittis justo, ac pulvinar quam arcu eu dolor. Praesent lectus mauris, molestie in elit quis, scelerisque consectetur lectus. Phasellus ac scelerisque leo. Nullam eget interdum sapien. Suspendisse et urna sodales, venenatis augue ac, volutpat nisi. Mauris non fermentum nibh.
Proin nec augue et lectus congue pretium. Nullam orci nibh, sagittis vitae ex in, iaculis viverra erat. Praesent vitae lorem urna. Sed mi nibh, accumsan eget fringilla vitae, gravida non orci. Aenean justo massa, finibus non aliquet quis, fermentum et odio. Donec scelerisque est nunc, sit amet vulputate libero sodales a. Integer placerat felis eu enim porttitor tristique. Phasellus vestibulum tempus magna. Quisque commodo sodales dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt nisi eget purus dapibus, quis pharetra magna bibendum. Sed id gravida lorem. Quisque dui quam, imperdiet id ultricies nec, ultrices non lacus. In blandit, sapien non laoreet volutpat, elit orci pharetra magna, in volutpat lacus elit nec metus. Ut eu vulputate sapien. Aliquam dictum, orci nec lacinia vestibulum, massa elit sollicitudin nisl, faucibus facilisis massa neque vestibulum eros.
Cras sed aliquam leo. Proin porttitor tincidunt enim, eget luctus justo. Aenean ultricies non urna quis interdum. In elit purus, ultrices et mollis sed, ullamcorper finibus ante. Vestibulum fringilla erat at orci ornare, eu vestibulum risus tincidunt. Proin a mauris quam. Ut dignissim ullamcorper volutpat. Sed tincidunt porta ornare. Donec sed ullamcorper mauris. Nulla mauris leo, egestas a eleifend ac, convallis a augue. Phasellus sollicitudin lorem ac sapien luctus finibus. Proin nec nisl dictum, consequat metus lacinia, pellentesque magna. Nam posuere hendrerit turpis, sit amet venenatis nisi congue sed. Suspendisse dui sem, placerat non felis sit amet, scelerisque cursus risus.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla cursus pharetra felis, a porta nunc convallis ac. Nullam laoreet lorem ultrices nisl gravida, at rutrum nisl condimentum. Curabitur ac faucibus dolor. Nullam hendrerit maximus mi, pulvinar venenatis ex tincidunt nec. Sed ullamcorper sit amet dolor eu venenatis. Ut sodales in orci sed tempor. Nullam nisl quam, convallis sit amet nulla id, vulputate sagittis est. Suspendisse egestas viverra quam, eget gravida massa luctus rhoncus. Nulla leo magna, commodo non maximus venenatis, ultricies eget mi. Quisque arcu magna, vehicula ac leo vel, gravida feugiat leo. Praesent at accumsan urna. Sed semper, nunc sed aliquam euismod, metus ex dignissim nisl, et dictum leo nibh quis dolor. Duis et purus quis augue aliquam lobortis ut eget ipsum.
Vestibulum pretium dignissim dolor, vel efficitur nisl vestibulum et. In aliquet ultricies eleifend. Donec tempor diam at pellentesque pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum imperdiet eu urna sit amet vestibulum. Ut sagittis odio nec sapien dapibus porttitor. Mauris lorem nibh, tempor non mi vel, vulputate fringilla libero. Sed varius massa eu metus elementum rhoncus. Phasellus vel interdum felis. Sed nec vulputate diam.
Integer tempus mattis aliquet. Nulla fermentum ex nec vestibulum bibendum. Aliquam in metus quis velit sollicitudin ornare quis et arcu. Fusce vitae ligula at libero pretium tincidunt. Praesent finibus metus nec posuere viverra. Nullam ac mattis mauris, ut vehicula enim. Proin efficitur fringilla mi sed maximus. Donec vel tempor nibh. Duis malesuada mauris et eros ultricies sollicitudin. Sed eget elementum libero. In vulputate lectus a ipsum eleifend, vel feugiat ex ornare.
</body>
</html>
Here is some code that I made a while back. You can take it and customize the scroll bar any way you want.
Try it in this jsfiddle: http://jsfiddle.net/wLD49/
HTML:
<div class="container">
<div class="scrollable">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis blandit lectus tempus aliquam. Aenean tempor libero odio, in gravida dui laoreet vitae. Duis porttitor, sem id convallis rhoncus, enim dolor volutpat nibh, vel sollicitudin arcu tortor eget elit. Vestibulum eu eros in ante rutrum porttitor. Quisque volutpat faucibus est, cursus suscipit nisi tincidunt sit amet. Proin leo odio, aliquam ac rutrum eget, rutrum quis dui. Nam tincidunt, diam at fringilla rhoncus, mi lacus faucibus sem, eu dapibus nunc felis ac nisl.
</div>
<div class="scrollbar"></div>
</div>
</div>
CSS:
.container {
width: 200px;
height: 100px;
overflow: hidden;
border: 1px solid blue;
position: relative;
}
.scrollable {
overflow-x: hidden;
overflow-y: auto;
width: 100%;
height: 100%;
padding-right: 30px;
}
.content {
/* 10px for the scroll bar plus some extra spacing */
padding-right: 12px;
}
.scrollbar {
width: 8px;
height: 25px;
background-color: lightblue;
border-radius: 4px;
position: absolute;
right:0;
top: 0;
}
.scrollable:hover .scrollbar {
background: blue;
}
JavaScript:
var scrollables = document.getElementsByClassName('scrollable');
scrollables[0].addEventListener('scroll', scrolled);
function scrolled(e) {
var content = this.getElementsByClassName('content')[0];
var scrollingRange = content.offsetHeight - this.offsetHeight;
var scrollingRatio = this.scrollTop / scrollingRange;
var scrollbar = this.getElementsByClassName('scrollbar')[0];
var scrollbarRange = this.offsetHeight - scrollbar.offsetHeight;
scrollbar.style.top = String(scrollingRatio * scrollbarRange) + 'px';
console.log(scrollingRatio, scrollbarRange);
}
I'm looking for a footer like facebook has but only use CSS to style it no js.
As you can see here http://dl.getdropbox.com/u/5910/Jing/2009-02-03_1256.png it always stays at the bottom even if I scroll down. http://dl.getdropbox.com/u/5910/Jing/2009-02-03_1258.png
For all browsers, save for IE6, do this:
div#footer {
bottom: 0;
width: 100%;
height: 25px;
position: fixed;
}
I know you mentioned not wanting to use JavaScript, but as for IE6, it's been my experience that you may have to resort to some sort of JavaScript expression in the CSS to get it to work as smoothly as this CSS does in other browsers.
This might do it:
http://ryanfait.com/sticky-footer/
I've used this in the past:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Fixed CSS layer sample</title>
<style type="text/css">
body
{
margin:0;
padding:0 10px 0 10px;
border:0;
height:100%;
overflow-y:auto;
}
#fixed
{
display:block;
bottom:0px;
left:0px;
right:0px;
position:fixed;
border:1px solid #888;
padding:0px;
text-align:center;
font-weight:bold;
color:#000;
background: #ccc;
width: 100%;
height: 100px;
}
* html #fixed
{
position:absolute;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
</head>
<body>
<div id="page">
<p><h3>Some latin text here to make the page scroll</h3></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin pharetra pharetra tortor. Nunc in pede. Cras dapibus. Phasellus pede tortor, facilisis id, rutrum non, eleifend non, sem. Phasellus ut metus eu pede mollis sagittis. Cras ut justo ut metus rutrum auctor. Sed gravida consectetuer quam. Ut ligula. Suspendisse potenti. Ut et ante. Aenean mauris.</p>
<p>Praesent lorem. Praesent suscipit convallis orci. Morbi nec felis vitae est vehicula ornare. Quisque nisi neque, pretium ac, eleifend nonummy, cursus sit amet, purus. Nullam venenatis suscipit arcu. Aenean mattis enim vitae nisl. Maecenas diam pede, vehicula in, vehicula in, auctor ac, urna. Phasellus vel nibh scelerisque ante varius feugiat. Phasellus vehicula malesuada lorem. Donec elementum, elit vel cursus rhoncus, purus est nonummy leo, fermentum lacinia ante libero quis libero. Vivamus tincidunt, nulla et dapibus interdum, risus magna pharetra purus, eu adipiscing mi nisl eu massa. Donec elit arcu, scelerisque eu, suscipit quis, tincidunt ut, enim. Suspendisse eget justo vitae lectus euismod facilisis. Donec at ipsum nec mi sollicitudin viverra. Fusce accumsan, ante non dictum viverra, libero pede condimentum dolor, non congue nisl enim sit amet nulla. Aenean mollis, metus sed molestie bibendum, nulla erat tincidunt velit, non feugiat lorem mauris id mi. Mauris eleifend. Vivamus viverra. Fusce dapibus libero feugiat lorem.</p>
<p>Donec a nisl nec neque dictum varius. Aliquam consequat ipsum in dui placerat feugiat. Nam fringilla, libero ut consectetuer aliquet, lorem nisi pharetra est, eu sagittis lorem purus ac dolor. Donec aliquet mi nec augue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas pretium, est sed feugiat bibendum, odio ligula convallis pede, id aliquet erat turpis sit amet ipsum. Phasellus pulvinar laoreet arcu. Curabitur nunc. Ut id purus vitae lacus convallis consectetuer. Duis in quam. Praesent pharetra. In quis est a massa pretium auctor. Nam metus mi, pulvinar ac, blandit nec, suscipit semper, quam. Integer eget felis id enim sodales dictum. Phasellus quis neque. Duis cursus imperdiet lorem. Etiam eget risus et erat dapibus feugiat. Aenean gravida justo vitae lectus. Nullam aliquet. Integer et augue porttitor urna varius porta.</p>
<p>Suspendisse ultricies mauris eget velit dictum tincidunt. Maecenas id pede quis massa ornare congue. Fusce placerat odio non erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque dignissim nunc ac ipsum. Integer ac libero et risus luctus ultrices. Phasellus urna. Nunc a lorem eu diam mollis rhoncus. Curabitur velit mi, mollis sit amet, vulputate ut, varius lobortis, turpis. Nulla scelerisque euismod lacus. Phasellus vehicula justo sed diam. Sed non nisi sit amet sem posuere fermentum. Donec faucibus pede. Donec pharetra tristique lacus.</p>
<p>Maecenas luctus, nisl molestie gravida sagittis, quam augue elementum mi, vitae scelerisque lacus eros id mi. Pellentesque purus erat, hendrerit eu, suscipit eu, elementum quis, quam. Sed faucibus lorem lobortis ipsum. Nulla facilisi. In et leo et erat ullamcorper iaculis. Duis aliquet ipsum quis ligula. Sed condimentum, ipsum semper tincidunt tempus, nisi nulla congue ante, ut placerat ligula est eget risus. Nam nonummy molestie tortor. Nunc dapibus, metus id adipiscing mattis, felis enim pretium risus, ac elementum nibh massa at nulla. Duis eu dui nec lacus aliquet iaculis. Fusce et odio eu pede ultricies fermentum. Morbi pulvinar vulputate odio. Vestibulum dui ante, feugiat a, sodales at, tristique eu, dolor. Phasellus est. In in neque at lectus tristique pulvinar. Pellentesque sed nulla. Aliquam fermentum, diam eu auctor eleifend, velit elit scelerisque nulla, at dignissim odio justo id metus. Duis mattis rutrum mauris. Nullam quis nulla.</p>
<p>In justo tellus, elementum ac, aliquet egestas, luctus ac, pede. Nulla facilisi. Sed et dui. Suspendisse pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras erat lectus, fermentum at, iaculis quis, blandit non, eros. Donec libero turpis, laoreet vitae, volutpat in, molestie ac, nulla. Donec tempus. Aenean eleifend cursus velit. Duis dolor ipsum, commodo a, commodo ac, faucibus vitae, quam. Integer dignissim. Curabitur non elit. Ut aliquet eros sit amet nisi.</p>
<p>Sed consequat est vitae tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec convallis, ligula sed rhoncus viverra, augue orci commodo massa, quis laoreet nulla lacus quis velit. Suspendisse a eros in massa sodales fermentum. Aliquam a augue. Sed nonummy eros eget magna dictum venenatis. Vestibulum molestie pede sit amet neque. Duis et ante ac eros mattis ultrices. Praesent placerat felis non nisl. Curabitur eleifend, purus non rhoncus lobortis, erat felis vestibulum est, at sagittis est orci ut orci. Aliquam pretium. Pellentesque eget neque. Nam sit amet tellus.</p>
<p>Integer ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin nulla metus, auctor sit amet, semper ut, ullamcorper sit amet, eros. Maecenas aliquam metus ut metus. Suspendisse sed neque vel odio dapibus iaculis. Sed semper. Nulla et pede vel sapien laoreet interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus neque dolor, ultrices quis, molestie commodo, tempus vel, massa. Cras nec diam eleifend libero adipiscing aliquet. Duis malesuada. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum volutpat metus ac elit imperdiet tincidunt. Mauris pellentesque nunc eget lectus.</p>
<p>Proin id nunc sit amet mi lobortis aliquet. Ut eget felis sit amet nunc viverra lacinia. Maecenas ut nulla sed metus bibendum mattis. In hac habitasse platea dictumst. Aliquam consectetuer nunc vel neque. Nullam quam nisi, semper eget, faucibus nec, vehicula quis, mi. Nunc nisi. Donec massa metus, pharetra vitae, vehicula non, eleifend at, libero. Ut ac est a nunc rutrum vestibulum. Nulla gravida. Sed suscipit luctus augue. Aliquam posuere felis. Nunc interdum, nisi a blandit scelerisque, mi nibh blandit justo, et malesuada nibh ligula id ipsum. Donec a ipsum sed nunc placerat interdum. Curabitur blandit. Suspendisse varius faucibus dolor. Cras a urna. Mauris leo. Nunc pretium, pede ut posuere cursus, sapien tellus blandit massa, id vestibulum metus est vitae tellus. Maecenas urna.</p>
<p>Pellentesque tortor. Pellentesque faucibus dui vitae mauris. Pellentesque bibendum iaculis tortor. In sem purus, eleifend in, laoreet ut, tincidunt nec, magna. Mauris gravida, diam eu tincidunt fringilla, est nisi pharetra ante, non luctus justo odio a ipsum. Maecenas eu augue. Ut iaculis. Nunc arcu nunc, elementum sed, aliquam non, laoreet sed, nisl. Pellentesque felis. Suspendisse auctor tortor ut turpis. Vestibulum tincidunt laoreet neque. Phasellus odio enim, mollis vel, varius sed, imperdiet ut, tortor. Phasellus eleifend dolor ut metus. Proin est. Phasellus placerat pede rutrum libero. Suspendisse varius erat a urna convallis porta. Integer hendrerit odio id leo. Sed porta sapien suscipit sem.</p>
<p>Quisque a lorem. Duis quis tortor. Suspendisse mattis porttitor augue. Aliquam facilisis porttitor quam. In vel metus ut quam commodo viverra. Pellentesque et mauris sit amet eros adipiscing commodo. Maecenas vitae pede vitae diam viverra vestibulum. Integer suscipit, quam sit amet hendrerit porta, velit tellus rhoncus pede, eget sollicitudin arcu felis quis leo. Sed auctor blandit ligula. Fusce accumsan viverra nibh. Aliquam erat volutpat. Quisque velit velit, sagittis et, congue at, auctor eu, quam. Sed dui ipsum, rhoncus eget, commodo at, vulputate a, metus. Donec eu mi. Sed laoreet faucibus ipsum. Donec cursus egestas turpis. Nulla facilisi. Nam et tellus.</p>
<p>Praesent sagittis ligula eget lacus dictum blandit. Nam libero pede, faucibus non, vestibulum tempus, tincidunt quis, est. Vestibulum accumsan risus. Nulla facilisi. Praesent nisi turpis, pulvinar vitae, blandit vitae, hendrerit vel, ante. Morbi viverra purus dapibus quam. Donec ligula. Cras pretium metus. Nunc ac erat. Sed elit quam, cursus sit amet, egestas eget, cursus sit amet, orci. Praesent non purus non orci sodales interdum. Fusce lobortis risus eu est.</p>
<p>Quisque arcu nisl, fringilla vel, vehicula in, bibendum nec, arcu. Nullam sit amet mi nec velit cursus rhoncus. In sed ante. Aenean nec augue. Curabitur et sem laoreet dolor blandit aliquam. Mauris sollicitudin orci nec leo. Proin magna. Suspendisse eleifend, diam vitae mattis suscipit, felis risus varius massa, ut ornare eros pede nec ligula. Proin commodo, justo et egestas ultrices, tellus elit aliquam ante, a rhoncus felis risus elementum arcu. Quisque placerat mattis arcu. Etiam auctor auctor nisl. Ut sed purus. Donec semper iaculis arcu. Maecenas nulla. Sed congue euismod nulla. Vestibulum ligula justo, venenatis at, rhoncus ac, iaculis id, nunc. Morbi sit amet augue eu ipsum fermentum facilisis.</p>
<p>Nam magna. Fusce sed ante in mauris consectetuer mattis. Mauris imperdiet nibh tincidunt elit. Praesent eget lectus quis sem egestas molestie. Suspendisse potenti. Nunc mauris quam, pharetra id, gravida vitae, sodales id, lacus. Fusce lectus. Integer mollis justo. Duis vel mi et massa porttitor dictum. Donec scelerisque leo quis nulla. Sed ante ante, feugiat eget, vulputate a, dignissim quis, elit. Nam in turpis. Morbi lacus libero, varius at, dignissim id, auctor eget, urna. Cras in mauris. Vivamus felis purus, tempus at, volutpat eget, fermentum sagittis, lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
<p>Mauris mattis tincidunt erat. Maecenas aliquam mauris vel nulla. Morbi volutpat. Sed lorem mauris, interdum id, accumsan sit amet, consequat interdum, velit. Pellentesque ac est non sem posuere accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut vitae augue non lorem rhoncus malesuada. Phasellus viverra, leo non commodo ullamcorper, leo nibh accumsan mi, a tempus lectus lectus ac erat. Morbi ultrices mauris sit amet nunc. Donec porta nisl. Aenean tempor.</p>
</div>
<div id="fixed">[fixed footer]</div>
</body>
</html>
Might need some modification, especially to work in IE6. If I recall correctly, I had to add in some page breaks under the page content to stop the footer overlapping the content, but that aside, I think it worked fine.