这是小提琴：https://jsfiddle.net/Asatani/Lheu70jn/
我最近决定深入研究RWD的世界，我无法按预期方式开展工作。这个特殊问题与我页面顶部的英雄形象并行相关。我理解如何使图像缩放，它完全按照我需要的方式工作，但当缩小视口时，页面的其余部分不会向上移动以填补空白。英雄形象的位置是相对的，宽度为100vw，高度为50vh。紧接着下面是一个间隔div（只有一个平坦的背景颜色），以构成英雄形象的框架。在我的电脑上查看时，它看起来很完美。从手机查看时，图像尺寸正确，但是间隔符位于页面下方，并且在视口调整时不会调整。
HTML：
<body>
<div id="topbar">
<nav>
<ul>
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Placeholder</a></li>
<li><a href="javascript:void(0)">Placeholder</a></li>
<li><a href="javascript:void(0)">Placeholder</a></li>
<li><a href="javascript:void(0)">Placeholder</a></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;
}