尝试了很多，所有版本的位置。它将停留在一页的底部。但不是一些。太奇怪了。
.footer {
width: 100%;
height: auto;
background-color: #17aa1f;
text-align: center;
position: relative;
bottom: 0;
}
.footer-info li {
color: white;
list-style-type: none;
}
<footer>
<div class="footer">
<ul class="footer-info">
<li>ex</li>
<li>Contact on:</li>
<li>ex@gmail.com</li>
</ul>
</div>
</footer>
【问题讨论】：
在您的.footer 上使用position: relative; 不会做任何事情，因为该容器只会使其相对于作为您的容器<footer> 的父容器。请改用position: absolute;，因为这会使类改为锚定到DOM。请参阅下面的 sn-p 以供参考：
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height: 100vh;
}
.footer {
width: 100%;
height: auto;
background-color: #17aa1f;
text-align: center;
position: absolute;
bottom: 0;
}
.footer-info li {
color: white;
list-style-type: none;
}<body>
<footer>
<div class="footer">
<ul class="footer-info">
<li>ex</li>
<li>Contact on:</li>
<li>ex@gmail.com</li>
</ul>
</div>
</footer>
</body>更多关于position属性here。
【讨论】：
我认为你在添加页脚标签时不需要使用位置
请勿在页脚标签下方添加任何标签或任何文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height: 100vh;
}
.footer {
width: 100%;
height: auto;
background-color: #17aa1f;
text-align: center;
bottom: 0;
}
.footer-info li {
color: white;
list-style-type: none;
}
</style>
</head>
<body>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet, animi quasi
vitae natus labore blanditiis totam eligendi dolorem voluptate nisi
voluptatibus ut hic provident distinctio pariatur perferendis quidem ad
facilis quaerat esse corporis, perspiciatis cum tempora. Nobis quos eos quis
dolorem, odit officia consequuntur reprehenderit accusantium mollitia
aliquam odio ex veritatis temporibus laboriosam placeat blanditiis
voluptatem. Placeat dignissimos beatae quas distinctio officia iure
molestias nostrum non animi id ex itaque, vero consectetur labore obcaecati.
Hic maiores veritatis expedita cum eum ipsa esse quisquam? Culpa pariatur
nostrum debitis tempora consectetur, temporibus voluptas totam possimus
praesentium corporis sapiente modi doloremque ut dignissimos aliquam qui
molestias officia dolorum facere facilis ad enim. Laborum inventore quae
incidunt odit vitae molestias, voluptatibus deleniti sint eos culpa nam,
obcaecati atque illo mollitia. Corporis, laboriosam! Earum sed praesentium
ipsam blanditiis voluptas voluptatum commodi. Error qui quo dolore assumenda
sit maiores omnis dolorem inventore laudantium, aliquam amet at commodi in
quae, porro esse cum molestiae eligendi ratione cupiditate neque
consequuntur earum? Eius rerum praesentium consequatur aliquam numquam in
beatae ad tempore sequi, quibusdam mollitia repudiandae debitis temporibus,
recusandae aut! Quibusdam, culpa atque reiciendis tempora repellat
distinctio quo deserunt? Commodi ab dicta nobis aliquid quas corrupti
dolores magni quam ad fugit perspiciatis, pariatur ipsam laborum molestias.
Accusantium vero perspiciatis tempora facilis assumenda enim consequuntur
perferendis minima, aliquid debitis iure voluptate molestias, sapiente
pariatur sequi quisquam sit neque atque dolor saepe autem ut animi fugiat
numquam. Temporibus tenetur nesciunt ipsam numquam quaerat inventore autem
voluptates velit unde sapiente, dolor nam, doloribus sit eos dolore aliquam
corporis optio explicabo enim alias quis? Error rem facere provident
inventore deleniti repellat possimus repellendus obcaecati, deserunt facilis
quis, similique eum debitis magnam dolor, praesentium cumque atque sapiente
expedita iusto sed! Maxime rerum inventore mollitia cupiditate, quae
consectetur iure ad explicabo architecto dolor voluptatum laborum voluptates
voluptatibus adipisci ipsum veniam recusandae nihil molestias, suscipit,
consequuntur ea porro praesentium? Dolorem, iusto obcaecati. Id fugit est,
magnam, placeat repellendus voluptatem dolorem libero tempore nisi dicta
nulla qui quod esse ab numquam exercitationem porro perspiciatis explicabo
iure? Cupiditate, expedita! Recusandae itaque quae sapiente, amet eius fuga
commodi cupiditate vitae quis! Saepe molestias, quidem odit ex dignissimos
et numquam pariatur soluta. Nisi, nulla? Inventore quis maiores, similique
sunt officia architecto culpa voluptatum nostrum corrupti expedita
reiciendis neque, quae exercitationem necessitatibus quo eius pariatur
mollitia dolores numquam, quos natus eveniet voluptate provident. Beatae
ipsum eaque sit illum, libero, facilis repellat possimus reiciendis quia cum
quo, enim voluptatum. Et voluptatibus maxime atque quia magni nostrum iure.
Aspernatur, voluptatum! Enim iste necessitatibus nostrum minima voluptatum
atque quis nisi at, esse vel voluptates maxime dolore dignissimos, dicta
aliquam quam qui numquam, saepe dolorum ullam. Accusamus voluptatibus at
mollitia necessitatibus, aperiam reprehenderit hic inventore qui tempore.
Doloribus, autem expedita molestiae voluptatum totam necessitatibus debitis
impedit amet eum! Nostrum earum aliquam quidem ratione vel pariatur
quibusdam inventore nam quis, alias impedit, mollitia at sit itaque, quia
totam consequuntur doloremque autem? Possimus sit autem et in aliquid, odio
commodi tempore nobis porro. Exercitationem sit laborum officia ducimus
earum voluptates similique cumque totam, quas alias quibusdam rem est
adipisci magnam quam maxime sapiente asperiores distinctio error ad impedit
architecto. Cupiditate nulla consequatur repellat commodi quae sunt, autem
delectus necessitatibus consectetur fugiat, quasi placeat a debitis mollitia
asperiores alias in corporis, aliquid corrupti reprehenderit nam qui non
voluptatem! Nesciunt a modi ut ab sint, sed corrupti mollitia quibusdam
quos, nisi fuga ipsum sunt ullam in perferendis? Distinctio iusto quod quia?
Deserunt quisquam consectetur aut eius laborum nam eveniet, dolor porro
nihil. Quia tempora asperiores sapiente quidem magni at rem, corporis dolor,
labore iste earum eveniet reiciendis, laudantium consequatur. Fugiat odio id
dolor ad non corporis, earum numquam voluptatibus maiores quae, doloribus
itaque. Placeat possimus provident adipisci fuga eum reprehenderit delectus
sapiente itaque. Neque vitae veniam velit perspiciatis nesciunt enim facilis
soluta fuga nulla dignissimos voluptates quod reiciendis quaerat, porro
sapiente? Repellat saepe fugit quaerat, unde vero molestias! Numquam autem
neque ipsa beatae quisquam commodi. Recusandae nesciunt quia esse voluptates
veniam qui! Quod maiores consequatur veniam natus rerum totam iste,
praesentium beatae exercitationem eos non alias voluptas harum quos quidem
ut, quaerat quis, aspernatur expedita iure molestias distinctio! In adipisci
modi deserunt repellat obcaecati ducimus, ut laborum similique aperiam
assumenda, quia ab aliquam alias itaque doloremque corrupti quasi vero nobis
aut sit reiciendis facilis fugit molestiae explicabo? Optio sit possimus ex
quas hic repellat laborum iste repudiandae minus perferendis provident
reiciendis, delectus sed eveniet vitae. Iste laboriosam, illum quas
provident nostrum ducimus saepe atque vitae! Enim aut voluptatibus
laudantium eum error qui modi, molestiae a. Maxime, molestiae perspiciatis
maiores quia soluta vero. Quidem aliquid culpa possimus, rerum quibusdam in
maxime animi ipsam architecto blanditiis corporis? Laudantium iure earum
voluptatem a, cupiditate porro id assumenda quisquam est consequuntur cum
obcaecati distinctio unde asperiores architecto! Deserunt excepturi nihil
amet voluptate nesciunt, placeat aut, iure architecto veritatis pariatur
blanditiis aspernatur quasi. Laboriosam ipsam labore excepturi aspernatur
sapiente aut totam vel, impedit et laudantium! Necessitatibus, consequatur
tempora dolores quaerat aliquid sint labore sequi dolore saepe a eos
pariatur itaque facilis sed, deleniti hic aperiam optio eius. Est cumque,
alias quaerat tempore perferendis maxime. Est pariatur sed veniam fugit,
architecto possimus a cumque provident maxime voluptatem quaerat adipisci
voluptates accusamus sint omnis alias doloribus explicabo nam. A asperiores
nisi reiciendis ut nostrum quam officiis labore iste repellat, laudantium
autem in fugit perferendis optio necessitatibus quod laboriosam incidunt non
sint. A facere animi error odio cumque obcaecati ad repellendus ut quam
omnis dignissimos assumenda facilis quis sunt sint, aliquam nisi quo
laudantium eaque totam libero repellat repudiandae veritatis velit. Libero
ad dicta aliquid incidunt eum voluptate reprehenderit necessitatibus aperiam
commodi, quae eos iste reiciendis! Excepturi minima a incidunt id, vero esse
alias assumenda dolores dolore magni possimus voluptatibus eaque dicta quam
enim saepe, veniam, explicabo modi architecto ullam similique! Earum minima
laudantium tempore! Quisquam quo esse nulla impedit architecto est
cupiditate alias neque accusamus error repellat, ad blanditiis eos enim,
sint, perspiciatis quam mollitia eius maxime natus. Voluptatum a
voluptatibus ab autem molestias obcaecati veritatis! Lorem, ipsum dolor sit
amet consectetur adipisicing elit. Laudantium suscipit omnis est nemo quod
aliquid totam, accusantium nisi, id sequi ex aspernatur molestias quaerat?
Harum asperiores libero, minus exercitationem ut distinctio repudiandae
sunt, laboriosam veniam soluta quisquam possimus dicta placeat a molestias
repellat porro eius sint earum voluptates voluptate nisi amet voluptatibus?
Quam commodi dicta voluptatibus a voluptates tempore, labore nihil ipsa
voluptatem inventore. Quas repudiandae ipsa deleniti minus error harum
repellat incidunt, iste maiores velit quia quibusdam iusto officiis, quasi
autem tempora magni aut recusandae, adipisci accusantium. Reprehenderit, in
repellendus libero nulla impedit tempora temporibus officiis error earum
laboriosam neque nobis similique soluta hic totam eligendi beatae ipsam
nostrum incidunt veritatis eos! Ipsam blanditiis cum reiciendis porro
voluptatum corrupti itaque totam nostrum explicabo qui ut modi, et iste amet
officiis assumenda a. Voluptatem ab repellendus autem alias reprehenderit
voluptas cupiditate minus earum ratione. Et repellat minus dignissimos
labore pariatur reprehenderit quisquam provident quas, accusamus assumenda
ut omnis cumque fugit obcaecati culpa amet ullam sint ad sit porro voluptas.
Eligendi dolorum enim excepturi vero nam? Ex error sed autem, asperiores
temporibus, repellat sint earum delectus eaque saepe blanditiis. Impedit sed
corporis nam, praesentium, fuga distinctio consectetur fugiat aspernatur
quis id, veritatis nulla ipsam similique quos aliquid suscipit assumenda
dignissimos nihil eos laborum vero ducimus ad dolorum. Assumenda ducimus
magnam facere veniam ut fugit hic! Consectetur quos, dolor alias laboriosam
praesentium hic quis voluptates nihil laborum assumenda quod autem modi
magni rem ea. Voluptatibus in debitis veniam minima. Consequuntur cum eius
possimus non, molestiae, mollitia eos fugit aliquid corrupti quod debitis,
beatae error voluptatibus impedit pariatur iusto? Omnis voluptas laboriosam
repellat iure blanditiis perferendis vel praesentium sint corrupti
necessitatibus eos, dignissimos quo quisquam deserunt, ad nisi nostrum?
Cumque dolores quos corporis sint sit fugit dolore numquam praesentium.
Dolor delectus eaque eos molestias, velit assumenda vel explicabo, in odio,
minima possimus nam iure aperiam totam dolore nisi. Quasi repellendus
perspiciatis deserunt vel et inventore excepturi soluta rem libero
cupiditate! Distinctio id necessitatibus voluptatibus expedita quasi et quae
laborum eos recusandae maiores vel iste libero deserunt quia dolorem magnam
iusto, fugiat rem repellendus. Quas incidunt velit deleniti fuga quaerat
beatae corporis perferendis animi cupiditate asperiores perspiciatis dolorum
saepe quia praesentium accusamus laboriosam, explicabo optio dolor quasi
nulla atque repellendus eaque dolores dignissimos. Accusamus autem possimus
asperiores neque sit debitis? Corrupti accusamus, ea eaque expedita aliquid
minus eum nulla voluptatum modi provident, eos nihil! Magni ipsam asperiores
quis, amet ipsa dolor magnam quisquam perferendis necessitatibus aspernatur
ratione, reiciendis, rerum cumque quo? A maxime, ex iste quo quidem commodi,
eaque minima ipsa dolorum voluptatum rerum dignissimos officiis minus at hic
inventore sunt, voluptatibus reprehenderit! Est ipsa esse tempora atque ut
enim vero culpa rerum officiis dicta, at sed, illum dignissimos labore nisi
error neque, tempore eligendi in adipisci! Ratione error autem voluptas ad
perspiciatis qui voluptates praesentium ducimus accusamus explicabo facere
rerum, exercitationem pariatur velit! Totam, quam! Officia alias magnam
suscipit id sunt sit quasi repellat cupiditate libero assumenda. Aliquid
molestiae quae assumenda nisi recusandae nam! Nulla iste odit dignissimos,
ipsum ab et iusto, quisquam esse accusantium, eum aspernatur magni mollitia
voluptate quo libero consectetur. Voluptates eos doloribus commodi harum
pariatur quibusdam molestiae animi saepe iusto quidem, error tempora
expedita aliquam. Quo beatae doloremque voluptas repellendus illum iure
iusto, quam molestiae perferendis. Consequuntur pariatur cumque aut deserunt
deleniti dolorem quidem! Voluptatum possimus vitae exercitationem facilis,
architecto accusamus, labore quae et dolores tempore, atque nostrum! Non
delectus iste sequi cumque beatae fugiat eaque vel. Dolor perspiciatis,
eveniet dolorem aliquam nemo nisi illo laborum tempora autem iste accusamus
id vitae unde. Laborum consequatur culpa ratione vero odio ab eos doloribus
a debitis quod aliquid labore iure, exercitationem aperiam excepturi?
Tempore expedita iure temporibus? Temporibus, saepe nemo? Iusto reiciendis
et ut vero voluptate mollitia magni quasi ipsum quisquam! Obcaecati fugit
repellendus aut exercitationem ullam dolore consectetur quam quis fuga
dignissimos accusamus, doloribus aperiam perferendis atque eos sint rem
adipisci eius dolorem? Natus architecto magnam tempore blanditiis dolor
iusto numquam nisi nam voluptatum sequi. A dolorem facilis tenetur suscipit,
nesciunt dignissimos autem molestias officiis. Praesentium, quod quidem.
Fugit sapiente voluptate quos! Cum aspernatur voluptates excepturi ipsum,
fuga nobis, quo in reiciendis quibusdam obcaecati reprehenderit
exercitationem doloremque molestias saepe repudiandae placeat! Ullam
blanditiis id dolore laboriosam voluptatum a quasi nesciunt minima expedita
excepturi mollitia, est, quibusdam velit repellendus aliquam dolores, libero
iure. Vitae, aspernatur exercitationem vero rerum quae labore fugit
cupiditate distinctio libero a laboriosam ab tempore reiciendis modi minima
alias inventore minus eius veritatis maiores ipsum nam. Amet esse provident
fugit doloribus quo ducimus molestias minima aliquam consequatur eligendi
architecto earum voluptatibus cumque, voluptas magni, nesciunt quod
temporibus suscipit aut aspernatur, ex praesentium beatae. Natus nam harum
est exercitationem consequatur iste nulla quo nobis atque delectus voluptate
sunt quibusdam fugit, cupiditate voluptatem inventore et soluta perspiciatis
nostrum sit aliquam maiores praesentium. Repellat asperiores provident
dolorem illo, expedita rem quam doloremque porro repudiandae atque
aspernatur nobis quibusdam necessitatibus eos labore quia accusamus adipisci
iure magnam eligendi est voluptates repellendus incidunt perferendis? Sed
nihil voluptatibus beatae molestias fuga vel velit, excepturi itaque ipsa
culpa voluptatum! Autem delectus nemo dolor numquam et esse molestiae, in
similique impedit sunt, possimus, quasi soluta harum illum. Porro dicta
nostrum quisquam ipsa reiciendis autem. Aperiam amet aut delectus enim ab ad
labore eum ullam perspiciatis. Totam repellat suscipit voluptatum in! Aut
sed, adipisci amet pariatur veniam odit exercitationem eos repellendus
accusamus doloremque perspiciatis recusandae officia quam architecto quasi
accusantium delectus dignissimos repudiandae. Deserunt sed expedita eos in
omnis? Omnis quaerat optio quidem incidunt consequuntur, dignissimos aut
minima. Fuga aliquam veniam, unde nostrum reiciendis recusandae. Ipsum
perspiciatis exercitationem ad voluptatum maiores et tempora quisquam
reprehenderit. Officiis fugiat aspernatur, nobis veritatis nam
exercitationem provident rerum explicabo rem maiores distinctio porro sed,
voluptatibus magni doloribus, amet magnam non et iste dolorem voluptates
dicta. Ex, modi. Voluptate odit quam soluta vero velit ea sapiente ratione
deleniti harum asperiores, nobis voluptatibus, culpa nulla, illum
consectetur. Laborum, eaque quibusdam animi, in sapiente distinctio ipsa,
iure exercitationem nisi magni voluptatibus aperiam natus omnis.
<footer>
<div class="footer">
<ul class="footer-info">
<li>ex</li>
<li>Contact on:</li>
<li>ex@gmail.com</li>
</ul>
</div>
</footer>
</body>
</html>【讨论】：