我對 HTML 和 CSS 比較陌生，我知道這個問題已經被問過很多次了。但我還沒有找到可行的解決方案。我的專案合作伙伴給我發了這個 HTML 頁腳代碼，我必須把它放在我們網站的底部。當我在瀏覽器上打開它時，單獨的 HTML 檔案本身可以作業。
<!DOCTYPE html>
<html>
<style>
.footer-dark {
padding:50px 0;
color:#f0f9ff;
background-color:#0a384b;
}
.footer-dark h3 {
margin-top:0;
margin-bottom:12px;
font-weight:bold;
font-size:16px;
}
.footer-dark ul {
padding:0;
list-style:none;
line-height:1.6;
font-size:14px;
margin-bottom:0;
}
.footer-dark ul a {
color:inherit;
text-decoration:none;
opacity:0.6;
}
.footer-dark ul a:hover {
opacity:0.8;
}
@media (max-width:767px) {
.footer-dark .item:not(.social) {
text-align:center;
padding-bottom:20px;
}
}
.footer-dark .item.text {
margin-bottom:36px;
}
@media (max-width:767px) {
.footer-dark .item.text {
margin-bottom:0;
}
}
.footer-dark .item.text p {
opacity:0.6;
margin-bottom:0;
}
.footer-dark .item.social {
text-align:center;
}
@media (max-width:991px) {
.footer-dark .item.social {
text-align:center;
margin-top:20px;
}
}
.footer-dark .item.social > a {
font-size:20px;
width:36px;
height:36px;
line-height:36px;
display:inline-block;
text-align:center;
border-radius:50%;
box-shadow:0 0 0 1px rgba(255,255,255,0.4);
margin:0 8px;
color:#fff;
opacity:0.75;
}
.footer-dark .item.social > a:hover {
opacity:0.9;
}
.footer-dark .copyright {
text-align:center;
padding-top:24px;
opacity:0.3;
font-size:13px;
margin-bottom:0;
}
</style>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="footer-dark">
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 item">
<h3>Services</h3>
<ul>
<li><a href="#">Consultation</a></li>
<li><a href="#">Confinement</a></li>
<li><a href="#">Other Services</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3 item">
<h3>About</h3>
<ul>
<li><a href="#">Doctors</a></li>
<li><a href="#">Partner Hospitals</a></li>
<li><a href="#">Offers</a></li>
</ul>
</div>
<div class="col-md-6 item text">
<h3>St. San Vitores Hospital</h3>
<p>Your health is our priority. </p>
</div>
<div class="col item social"><a href="#"><i class="icon ion-social-facebook"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-instagram"></i></a></div>
</div>
<p class="copyright">St. San Vitores Hospital ? 1980 </p>
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
但是，我必須將他的代碼合并到我們的主檔案中。我將 <div > 中的內容放在 index.html 檔案中，并將 <style> 標記中的內容放在 index.css 檔案中。
CSS
@media screen and (max-width: 1240px) {
.container a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
html {
height: 100%;
box-sizing: border-box;
}
body {
height: 100%;
min-height: 100%;
min-height: 100vh;
display:flex;
flex-direction:column;
}
/* other content of the website*/
footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
.footer-dark {
padding:50px 0;
color:#f0f9ff;
background-color:#0a384b;
}
.footer-dark h3 {
margin-top:0;
margin-bottom:12px;
font-weight:bold;
font-size:16px;
}
.footer-dark ul {
padding:0;
list-style:none;
line-height:1.6;
font-size:14px;
margin-bottom:0;
}
.footer-dark ul a {
color:inherit;
text-decoration:none;
opacity:0.6;
}
.footer-dark ul a:hover {
opacity:0.8;
}
@media (max-width:767px) {
.footer-dark .item:not(.social) {
text-align:center;
padding-bottom:20px;
}
}
.footer-dark .item.text {
margin-bottom:36px;
}
@media (max-width:767px) {
.footer-dark .item.text {
margin-bottom:0;
}
}
.footer-dark .item.text p {
opacity:0.6;
margin-bottom:0;
}
.footer-dark .item.social {
text-align:center;
}
@media (max-width:991px) {
.footer-dark .item.social {
text-align:center;
margin-top:20px;
}
}
.footer-dark .item.social > a {
font-size:20px;
width:36px;
height:36px;
line-height:36px;
display:inline-block;
text-align:center;
border-radius:50%;
box-shadow:0 0 0 1px rgba(255,255,255,0.4);
margin:0 8px;
color:#fff;
opacity:0.75;
}
.footer-dark .item.social > a:hover {
opacity:0.9;
}
.footer-dark .copyright {
text-align:center;
padding-top:24px;
opacity:0.3;
font-size:13px;
margin-bottom:0;
}
html {
scroll-behavior: smooth;
}
頁腳內容與網頁中間的一些內容重疊。但是，當我最小化瀏覽器時，頁腳實際上會到底部。無論瀏覽器的大小如何，如何讓它保持在網頁的底部？
uj5u.com熱心網友回復：
嘗試將固定位置和底部樣式添加到您的 footer-dark 類
.footer-dark {
padding:50px 0;
color:#f0f9ff;
background-color:#0a384b;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}uj5u.com熱心網友回復：
通過將這兩行添加到 .footer-dark，從 html 和 index.css 開始，它對我有用：
position: fixed;
bottom: 0;
width: 100%;
記住
<link rel="stylesheet" href="index.css">
在你的 html 的 head 部分。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/418307.html
標籤：