添加 .footer 类
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}<h2>Footer Example</h2>
<div class="footer">
<div>
</div>
<div class="footer_container">
<ul class="navigation">
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
/* Height of the footer */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
/* Height of the footer */
background: #6cf;
}<div id="container">
<div id="header">This is header</div>
<div id="body">
<h1>This is body DUMMY TEXT</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At varius vel pharetra vel turpis nunc. Accumsan sit amet nulla facilisi. Molestie at elementum eu facilisis sed odio. Vitae
sapien pellentesque habitant morbi tristique senectus et. Lobortis scelerisque fermentum dui faucibus. Nunc scelerisque viverra mauris in aliquam sem. Congue mauris rhoncus aenean vel elit scelerisque mauris. Laoreet id donec ultrices tincidunt
arcu non sodales neque sodales. Velit aliquet sagittis id consectetur purus ut faucibus. Ipsum nunc aliquet bibendum enim facilisis gravida. Gravida in fermentum et sollicitudin ac orci phasellus. Tortor vitae purus faucibus ornare suspendisse sed
nisi. Faucibus pulvinar elementum integer enim neque volutpat. Venenatis cras sed felis eget velit. Velit egestas dui id ornare. Tempus iaculis urna id volutpat. In hac habitasse platea dictumst. Viverra maecenas accumsan lacus vel facilisis volutpat.
Enim praesent elementum facilisis leo. Ut tristique et egestas quis. Id interdum velit laoreet id donec ultrices tincidunt arcu. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim. Sit amet consectetur adipiscing elit duis tristique
sollicitudin nibh sit. Nec dui nunc mattis enim ut tellus. Adipiscing vitae proin sagittis nisl rhoncus. Bibendum est ultricies integer quis auctor. Egestas tellus rutrum tellus pellentesque eu tincidunt. Sagittis id consectetur purus ut faucibus
pulvinar elementum. Feugiat pretium nibh ipsum consequat nisl vel. Integer malesuada nunc vel risus. Tortor id aliquet lectus proin nibh nisl. Ante metus dictum at tempor commodo ullamcorper a. Enim blandit volutpat maecenas volutpat blandit aliquam
etiam erat. Morbi blandit cursus risus at ultrices mi. Netus et malesuada fames ac turpis egestas. Sed augue lacus viverra vitae congue. Cursus risus at ultrices mi. Libero enim sed faucibus turpis in eu mi bibendum neque. Vulputate dignissim suspendisse
in est ante in nibh mauris cursus. Ultricies mi quis hendrerit dolor magna eget. Cras adipiscing enim eu turpis egestas pretium aenean pharetra. Mattis ullamcorper velit sed ullamcorper morbi. Vel risus commodo viverra maecenas accumsan lacus vel.
Posuere urna nec tincidunt praesent semper feugiat nibh sed. Hendrerit gravida rutrum quisque non tellus orci. In nulla posuere sollicitudin aliquam ultrices sagittis orci. Eget mauris pharetra et ultrices neque ornare. Commodo ullamcorper a lacus
vestibulum. Ligula ullamcorper malesuada proin libero nunc consequat. Augue eget arcu dictum varius duis at consectetur lorem. Felis imperdiet proin fermentum leo vel orci porta. Et netus et malesuada fames ac. Tincidunt augue interdum velit euismod
in. Auctor neque vitae tempus quam pellentesque nec nam aliquam. Enim neque volutpat ac tincidunt vitae semper quis lectus nulla. Semper viverra nam libero justo laoreet sit amet cursus sit. Quis risus sed vulputate odio. Non curabitur gravida arcu
ac tortor. Pellentesque eu tincidunt tortor aliquam nulla. Dui sapien eget mi proin sed libero enim sed faucibus. Adipiscing elit duis tristique sollicitudin. Enim lobortis scelerisque fermentum dui faucibus. Ac placerat vestibulum lectus mauris
ultrices eros in cursus turpis. Congue eu consequat ac felis donec. Diam maecenas sed enim ut sem viverra. Id cursus metus aliquam eleifend mi in nulla posuere sollicitudin. Nibh venenatis cras sed felis eget velit aliquet sagittis id. Risus at
ultrices mi tempus imperdiet nulla. Vel eros donec ac odio tempor orci dapibus ultrices in. Nisl condimentum id venenatis a condimentum vitae. Amet est placerat in egestas erat. Aliquet nec ullamcorper sit amet. Odio facilisis mauris sit amet massa.
Velit aliquet sagittis id consectetur. Leo integer malesuada nunc vel. In ornare quam viverra orci. Tristique senectus et netus et malesuada. Sit amet purus gravida quis blandit turpis cursus in. Bibendum arcu vitae elementum curabitur vitae. Ultrices
gravida dictum fusce ut. Tellus rutrum tellus pellentesque eu. Sit amet luctus venenatis lectus. Eget felis eget nunc lobortis mattis. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Blandit turpis cursus in hac habitasse platea. Adipiscing
at in tellus integer feugiat scelerisque. Ut eu sem integer vitae justo. Id velit ut tortor pretium viverra suspendisse potenti. Nunc pulvinar sapien et ligula ullamcorper malesuada. Nulla aliquet enim tortor at. Suspendisse interdum consectetur
libero id faucibus. Vitae et leo duis ut diam quam nulla porttitor massa. Posuere ac ut consequat semper viverra nam libero. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Ultricies leo integer malesuada nunc vel risus commodo viverra.
Mi bibendum neque egestas congue quisque egestas diam. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Nec feugiat in fermentum posuere urna nec. Cras ornare arcu dui vivamus arcu. Tincidunt vitae semper quis lectus nulla. Faucibus
in ornare quam viverra orci sagittis eu volutpat. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Molestie at elementum eu facilisis sed odio morbi quis commodo. In aliquam sem fringilla ut morbi tincidunt augue. Quam pellentesque
nec nam aliquam sem et tortor consequat. In massa tempor nec feugiat nisl. Suspendisse sed nisi lacus sed viverra tellus in hac. Pretium lectus quam id leo in vitae. Maecenas sed enim ut sem viverra aliquet eget. Nulla malesuada pellentesque elit
eget gravida cum sociis. Consectetur a erat nam at lectus. In fermentum et sollicitudin ac orci. Purus ut faucibus pulvinar elementum integer enim. Ut diam quam nulla porttitor massa id neque. Vitae semper quis lectus nulla at. Amet facilisis magna
etiam tempor orci eu lobortis elementum nibh. Etiam sit amet nisl purus. Lectus mauris ultrices eros in cursus turpis massa. Vel facilisis volutpat est velit egestas dui id ornare arcu. Feugiat vivamus at augue eget arcu dictum varius. Sem et tortor
consequat id porta nibh venenatis cras sed. Euismod elementum nisi quis eleifend. Etiam non quam lacus suspendisse faucibus. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Suspendisse interdum consectetur libero id faucibus
nisl tincidunt eget. Auctor augue mauris augue neque gravida in. Ornare arcu dui vivamus arcu felis bibendum ut tristique. Ullamcorper sit amet risus nullam eget. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus.
Nec ultrices dui sapien eget mi proin sed libero enim. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Vel risus commodo viverra maecenas accumsan. Donec pretium vulputate sapien nec sagittis aliquam malesuada.
Imperdiet sed euismod nisi porta lorem mollis aliquam ut. Nunc sed blandit libero volutpat sed cras. Enim eu turpis egestas pretium aenean pharetra magna ac placerat. Augue ut lectus arcu bibendum. Orci porta non pulvinar neque laoreet suspendisse.
Gravida neque convallis a cras semper. Bibendum enim facilisis gravida neque convallis a cras semper. Elementum curabitur vitae nunc sed velit dignissim sodales ut. Mauris in aliquam sem fringilla ut morbi tincidunt. Consequat ac felis donec et
odio. Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Vel pharetra vel turpis nunc. Velit aliquet sagittis id consectetur purus ut. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Ut faucibus pulvinar elementum integer.
Convallis posuere morbi leo urna molestie at elementum. Justo nec ultrices dui sapien. Sed blandit libero volutpat sed cras ornare arcu dui. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Adipiscing elit ut aliquam purus
sit amet luctus venenatis lectus. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Dictumst quisque sagittis purus sit. Pellentesque nec nam aliquam sem et tortor consequat id. Diam ut venenatis tellus in. Eu nisl nunc mi ipsum
faucibus vitae aliquet nec. Consequat interdum varius sit amet mattis vulputate enim nulla aliquet. Adipiscing diam donec adipiscing tristique risus. Tortor at auctor urna nunc id cursus metus aliquam eleifend. Eget dolor morbi non arcu risus quis
varius. Facilisis volutpat est velit egestas dui. Varius vel pharetra vel turpis nunc eget. Eget mi proin sed libero enim sed faucibus turpis. Euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Ultricies mi quis hendrerit
dolor magna eget est lorem. Amet facilisis magna etiam tempor orci. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Elit ut aliquam purus sit amet luctus venenatis lectus. Eget lorem dolor sed viverra ipsum nunc. Magna sit amet purus
gravida quis blandit turpis. Eget felis eget nunc lobortis mattis aliquam. Turpis egestas pretium aenean pharetra magna ac. In ornare quam viverra orci sagittis eu volutpat. Feugiat in fermentum posuere urna nec tincidunt praesent semper feugiat.
Purus in mollis nunc sed id semper risus in hendrerit. Odio tempor orci dapibus ultrices in. Viverra vitae congue eu consequat ac felis donec et odio. Etiam sit amet nisl purus in mollis nunc. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper
velit sed. Nibh tellus molestie nunc non blandit. Pharetra sit amet aliquam id diam maecenas ultricies. Eu facilisis sed odio morbi quis commodo. Id consectetur purus ut faucibus. Blandit cursus risus at ultrices mi tempus. Id interdum velit laoreet
id donec ultrices. Purus gravida quis blandit turpis cursus in. A scelerisque purus semper eget. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. At augue eget arcu dictum varius duis. Suspendisse faucibus interdum posuere lorem.
Id faucibus nisl tincidunt eget nullam. Diam maecenas ultricies mi eget mauris pharetra et ultrices. Tortor posuere ac ut consequat semper viverra. Est lorem ipsum dolor sit amet. Scelerisque eleifend donec pretium vulputate sapien. Tempus iaculis
urna id volutpat lacus laoreet. Tristique nulla aliquet enim tortor. Consectetur a erat nam at lectus. Mi sit amet mauris commodo quis. Purus gravida quis blandit turpis. Mi eget mauris pharetra et ultrices neque ornare. Ornare arcu dui vivamus
arcu. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. At quis risus sed vulputate odio ut. Sed augue lacus viverra vitae. Sit amet purus gravida quis blandit turpis cursus in. Enim blandit volutpat maecenas volutpat blandit aliquam.
Lacus sed turpis tincidunt id aliquet risus. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Gravida arcu ac tortor dignissim convallis aenean. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Tortor vitae purus
faucibus ornare suspendisse sed nisi lacus. Varius sit amet mattis vulputate enim. Enim diam vulputate ut pharetra. Pharetra sit amet aliquam id diam maecenas ultricies mi eget. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Odio
euismod lacinia at quis risus sed. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Massa id neque aliquam vestibulum. Id donec ultrices tincidunt arcu non sodales neque sodales. Iaculis eu non diam phasellus vestibulum lorem sed risus.
Volutpat ac tincidunt vitae semper quis lectus nulla at. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Arcu bibendum at varius vel pharetra vel turpis. Velit aliquet sagittis id consectetur purus ut faucibus. Enim tortor
at auctor urna nunc. Ut etiam sit amet nisl purus in mollis nunc sed. Eu feugiat pretium nibh ipsum consequat. Dui sapien eget mi proin sed. Habitant morbi tristique senectus et netus. Convallis aenean et tortor at risus viverra adipiscing at. Tempus
imperdiet nulla malesuada pellentesque. Massa id neque aliquam vestibulum morbi blandit cursus risus. Adipiscing bibendum est ultricies integer. Luctus accumsan tortor posuere ac ut consequat. Nulla facilisi etiam dignissim diam quis enim lobortis
scelerisque. Consequat mauris nunc congue nisi vitae suscipit tellus mauris. Placerat in egestas erat imperdiet sed euismod nisi porta. Est sit amet facilisis magna etiam tempor orci eu lobortis. Tortor at risus viverra adipiscing at in. Sed cras
ornare arcu dui vivamus. Neque laoreet suspendisse interdum consectetur. Dui faucibus in ornare quam viverra orci. Cursus sit amet dictum sit amet justo donec enim. Maecenas volutpat blandit aliquam etiam erat velit. Id nibh tortor id aliquet lectus
proin. Vulputate ut pharetra sit amet. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Tincidunt dui ut ornare lectus sit amet. Diam donec adipiscing tristique risus
nec feugiat in fermentum posuere. Lacinia quis vel eros donec ac odio tempor orci. Sodales ut eu sem integer vitae justo eget magna. Id leo in vitae turpis massa sed. Aenean et tortor at risus viverra adipiscing at. Malesuada pellentesque elit eget
gravida cum sociis natoque penatibus et. Feugiat vivamus at augue eget arcu dictum varius duis at. Quis auctor elit sed vulputate mi sit amet mauris. Duis ut diam quam nulla porttitor massa id neque aliquam. Dictum varius duis at consectetur lorem
donec massa. Sagittis orci a scelerisque purus semper eget. Arcu felis bibendum ut tristique et. Nibh ipsum consequat nisl vel. Fermentum odio eu feugiat pretium nibh ipsum consequat. Amet commodo nulla facilisi nullam vehicula ipsum a. Enim tortor
at auctor urna nunc id. Faucibus nisl tincidunt eget nullam non. Volutpat odio facilisis mauris sit amet massa. Elementum integer enim neque volutpat ac tincidunt vitae semper. Ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae.
In tellus integer feugiat scelerisque varius morbi enim. At consectetur lorem donec massa. Tristique risus nec feugiat in fermentum posuere urna. Diam in arcu cursus euismod quis viverra nibh cras. Pellentesque nec nam aliquam sem et tortor consequat
id. Sem viverra aliquet eget sit amet tellus. Diam vel quam elementum pulvinar. Nec ultrices dui sapien eget mi proin. Eget egestas purus viverra accumsan in nisl nisi scelerisque. Vulputate odio ut enim blandit. Habitasse platea dictumst vestibulum
rhoncus est pellentesque elit. Pretium fusce id velit ut tortor pretium viverra suspendisse potenti. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Nulla facilisi cras fermentum odio eu feugiat pretium nibh. Integer eget aliquet nibh
praesent tristique magna sit. Ut pharetra sit amet aliquam. Aenean et tortor at risus viverra.</p>
</div>
<div id="footer">This will be footer</div>
</div>