首先，我對 HTML 和 CSS 編碼非常陌生。我已經學習了整整一周，我想我應該練習一下，試著幫助我記住一些元素、屬性和屬性。因此，您將要見證的代碼可能會傷到您的眼睛，但對于此事的任何幫助都會受到極大的歡迎。
我正在設計一個網站（即使最終形式也很可能永遠不會上線），我開始搞亂頁腳元素。稍后，我發現你可以為頁腳制作一個 div 元素。但是，無論我使用哪種方法，它最終都會覆寫我螢屏上的文本。在我向下滾動之前，它確實會一直停留在頁面底部，并且它始終覆寫正文內容。我知道這可能是由于 CSS 代碼樣式的身體，但我無法為我的生活弄明白。
我現在將它保留為 div，但如果使用頁腳會更好，那么請告訴我。我絕對想在遇到錯誤時立即完善我所犯的任何錯誤。
nav a {
color: black;
font-family: 'DM Sans', sans-serif;
font-size: 1.2em;
padding: 12px;
text-decoration: none;
width: 80%;
text-align: center;
padding-left: 5em;
padding-right: 2em;
}
.row {
display: flex;
}
.left-column {
height: 40vh;
flex: 50%;
}
.right-column {
height: 35vh;
flex: 50%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
#right-col-home {
background-image: url(https://s3.amazonaws.com/bprblogassets/blog/wp-content/uploads/2017/06/11165212/Power-Washing-Beginner.png);
margin-top: 12em;
}
.nav-bar {
border-width: 0em;
border-color: ghostwhite;
border-bottom: 0.15em solid gray;
font-family: 'Poppins', sans-serif;
background-color: ghostwhite;
overflow: auto;
padding: 0.8em;
margin-bottom: 2em;
}
.second-body {
font-family: 'Poppins', sans-serif;
padding-left: 10em;
padding-right: 10em;
color: slategray;
}
.main-heading {
font-size: 3em;
color: slategrey;
}
.body-text {
font-size: 1.0em;
}
.job-list {
font-size: 1.0em;
}
.main-body {
background-color: ivory;
min-height: 400px;
margin-bottom: 100px;
clear: both;
}
.question {
font-size: 1.7em;
font-weight: bolder;
}
.answer {
font-size: 1em;
}
.footer-bottom {
background: #343a40;
color: #686868;
height: 50px;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
padding-top: 20px;
}<head>
<title>Cleaning by Mark</title>
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM Sans&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<body class="main-body">
<nav class=nav-bar>
<span style="font-size: 1.5em; font-weight: bold; color: slategray;">Commercial Cleaning</span>
<a href="index.html">HOME</a>
<a href="faq.html">FAQ</a>
<a href="contact.html">CONTACT</a>
<a href="gallery.html">GALLERY</a>
</nav>
<div class="second-body">
<div class="row">
<div class="left-column">
<h1 class="main-heading">FAQ</h1>
<h2>Some frequently asked questions with answers:</h2>
<br>
<br>
<h2 class="question">What services do you provide?</h2>
<h3 class="answer">A whole range of services is on offer, from patio and driveway cleaning to roof and conservatory cleaning! Feel free to check out the services offered on the 'Home' page. If you still have a question, or would like to enquire about another service,
feel free to access the 'Contact' page and get in touch any time.</h3>
<h2 class="question">What are your prices?</h2>
<h3 class="answer">It's always difficult to provide an accurate quote without first assessing the job. However, Mark will happily provide a free no obligation quote - you may be surprised!</h5>
<br>
<h2 class="question">Are you able to clean rooves on houses?</h2>
<h3 class="answer">Yes! Mark's reach isn't limited to bungalows, conservatories and annexes. With his state-of-the-art equipment, he will be able to clean all the moss and dirt from house rooves too!</h5>
<h2 class="question">Do I need to provide anything?</h2>
<h3 class="answer">Here at Commercial Cleaning, we will provide all tools and chemicals required to clean the job. However, there may need to be an access for water - this is more possible with larger jobs. But rest assured, there will be no cost to you - the
cost of water will be deducted from your final invoice!</h3>
</div>
<div class="right-column" id="right-col-home">
</div>
</div>
</div>
<!-- Footer -->
<div class="footer-bottom">
© 2022 | commercialcleaning.com | Designed by Kieran|
</div>
</body>提前致謝。
uj5u.com熱心網友回復：
洗掉您的vh單位，在這種情況下這些是有問題的，因為在較小的設備上，過多的文本可能會超過設定vh并在footer.
然后將您更改footer為position: relative;并min-height: 100%;在.second-body.
html,
body {
margin: 0;
height: 100%;
}
nav a {
color: black;
font-family: 'DM Sans', sans-serif;
font-size: 1.2em;
padding: 12px;
text-decoration: none;
width: 80%;
text-align: center;
padding-left: 5em;
padding-right: 2em;
}
.row {
display: flex;
}
.left-column {
height: 100%;
flex: 50%;
}
.right-column {
flex: 50%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
#right-col-home {
background-image: url(https://s3.amazonaws.com/bprblogassets/blog/wp-content/uploads/2017/06/11165212/Power-Washing-Beginner.png);
}
.nav-bar {
border-width: 0em;
border-color: ghostwhite;
border-bottom: 0.15em solid gray;
font-family: 'Poppins', sans-serif;
background-color: ghostwhite;
overflow: auto;
padding: 0.8em;
margin-bottom: 2em;
}
.second-body {
font-family: 'Poppins', sans-serif;
padding-left: 5em;
padding-right: 5em;
color: slategray;
display: flex;
min-height: 100%;
}
.main-heading {
font-size: 3em;
color: slategrey;
}
.body-text {
font-size: 1.0em;
}
.job-list {
font-size: 1.0em;
}
.main-body {
background-color: ivory;
min-height: 400px;
margin-bottom: 100px;
clear: both;
}
.question {
font-size: 1.7em;
font-weight: bolder;
}
.answer {
font-size: 1em;
}
.footer-bottom {
background: #343a40;
color: #686868;
padding: 25px 0;
text-align: center;
position: relative;
bottom: 0px;
left: 0px;
padding-top: 20px;
}<!DOCTYPE html>
<html>
<head>
<title>Cleaning by Mark</title>
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM Sans&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<body class="main-body">
<nav class=nav-bar>
<span style="font-size: 1.5em; font-weight: bold; color: slategray;">Commercial Cleaning</span>
<a href="index.html">HOME</a>
<a href="faq.html">FAQ</a>
<a href="contact.html">CONTACT</a>
<a href="gallery.html">GALLERY</a>
</nav>
<div class="second-body">
<div class="row">
<div class="left-column">
<h1 class="main-heading">FAQ</h1>
<h2>Some frequently asked questions with answers:</h2>
<br>
<br>
<h2 class="question">What services do you provide?</h2>
<h3 class="answer">A whole range of services is on offer, from patio and driveway cleaning to roof and conservatory cleaning! Feel free to check out the services offered on the 'Home' page. If you still have a question, or would like to enquire about another service,
feel free to access the 'Contact' page and get in touch any time.</h3>
<h2 class="question">What are your prices?</h2>
<h3 class="answer">It's always difficult to provide an accurate quote without first assessing the job. However, Mark will happily provide a free no obligation quote - you may be surprised!</h5>
<br>
<h2 class="question">Are you able to clean rooves on houses?</h2>
<h3 class="answer">Yes! Mark's reach isn't limited to bungalows, conservatories and annexes. With his state-of-the-art equipment, he will be able to clean all the moss and dirt from house rooves too!</h5>
<h2 class="question">Do I need to provide anything?</h2>
<h3 class="answer">Here at Commercial Cleaning, we will provide all tools and chemicals required to clean the job. However, there may need to be an access for water - this is more possible with larger jobs. But rest assured, there will be no cost to you - the
cost of water will be deducted from your final invoice!</h3>
</div>
<div class="right-column" id="right-col-home"></div>
</div>
</div>
<!-- Footer -->
<div class="footer-bottom">
© 2022 | commercialcleaning.com | Designed by Kieran|
</div>
</body>uj5u.com熱心網友回復：
嘗試添加overflow-y:hidden;到 .footer-bottom 類。這很簡單——將防止垂直軸上的頁面溢位。
編輯：
如果這沒有幫助，您可以使用部分標簽并填充這些（這將是您更好的選擇）。
IE）
<section title="Section1">
<!-- Apply padding to top and bottom of Section1 in CSS. -->
Content here
</section>
<section title="Footer">
<!-- Apply padding to top of Footer in CSS. -->
Content here
</section>
希望這可以幫助。干杯!
uj5u.com熱心網友回復：
乍一看，您的頁腳似乎設定為“絕對”位置。當你這樣做時，它并沒有考慮到任何可能隱藏在它背后的東西。
我通常解決這個問題的方法是為其后面的內容添加更多邊距 - 在這種情況下，它會是底部的額外邊距。
這樣，隱藏的內容將有額外的空間向下滾動，從而將隱藏的內容帶入視圖（頁腳上方）。
編輯：我想我在描述一個不是你的問題的問題。
如果您希望將頁腳固定到位，即使使用滾動（如果您想這樣做），您也可以執行“位置：固定”。
如果您想繼續使用“絕對”位置，請注意“底部：0”的參考點在哪里取決于父容器，我認為在這種情況下是主體。如果容器是“位置：相對”（就像它在您設定為具有相對位置的 div 內），那么它將占據該 div 的底部。
因此，如果您的頁腳在滾動時以不希望的方式移動，那是因為它錨定在父/容器的底部（即位置：相對）。因此，您應該解決父級問題 - 如果您希望頁腳始終位于頁面底部，那么頁腳的錨點/父級應該位于檔案的底部。
希望這些資訊對您有所幫助！
uj5u.com熱心網友回復：
沒有 HTML5 存在標簽 semanticas que substituem algumas como por exemplo a do rodapé que que para ficar mais legível você pode inserir
例子
<footer>
© 2022 | commercialcleaning.com | Designed by Kieran|
</footer>
Assim como para o cabe?alho se usa 標簽：
<header></header>
e para o meio do conteúdo 一個標簽：
<main></main>
uj5u.com熱心網友回復：
<!DOCTYPE html>
<html>
<head>
<title>Cleaning by Mark</title>
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM Sans&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<style>
nav a {
color: black;
font-family: 'DM Sans', sans-serif;
font-size: 1.2em;
padding: 12px;
text-decoration: none;
width: 80%;
text-align: center;
padding-left: 5em;
padding-right: 2em;
}
.row{
display: flex;
}
.left-column {
height: 80vh;
flex: 50%;
}
.right-column {
height: 35vh;
flex: 50%;
background-position: right;
background-size: contain;
background-repeat: no-repeat;
}
#right-col-home {
background-image: url(https://s3.amazonaws.com/bprblogassets/blog/wp-content/uploads/2017/06/11165212/Power-Washing-Beginner.png);
margin-top: 12em;
}
.nav-bar {
border-width: 0em;
border-color: ghostwhite;
border-bottom: 0.15em solid gray;
font-family: 'Poppins', sans-serif;
background-color: ghostwhite;
overflow: auto;
padding: 0.8em;
margin-bottom: 2em;
}
.second-body {
font-family: 'Poppins', sans-serif;
padding-left: 10em;
padding-right: 10em;
color:slategray;
}
.main-heading {
font-size: 3em;
color: slategrey;
}
.body-text {
font-size: 1.0em;
}
.job-list {
font-size: 1.0em;
}
.main-body {
background-color: ivory;
min-height: 400px;
margin-bottom: 100px;
clear: both;
}
.question {
font-size: 1.7em;
font-weight: bolder;
}
.answer {
font-size: 1em;
}
.footer-bottom {
background: #343a40;
color: #686868;
height: 50px;
text-align: center;
position:relative;
bottom: 0px;
left: 0px;
padding-top: 20px;
}
#aFooter {
position: relative;
min-height: 150px;
bottom: 0px;
left: 0px;
}
#aFooter-content {
position: absolute;
bottom: 0;
left: 0;
}
#aFooter, #aFooter * {
background: rgba(40, 40, 100, 0.25);
}
</style>
<body class="main-body">
<div>
<nav class=nav-bar>
<span style="font-size: 1.5em; font-weight: bold; color: slategray;">Commercial Cleaning</span>
<a href="index.html">HOME</a>
<a href="faq.html">FAQ</a>
<a href="contact.html">CONTACT</a>
<a href="gallery.html">GALLERY</a>
</nav>
<div class="second-body">
<div class="row">
<div class="left-column">
<h1 class="main-heading">FAQ</h1>
<h2>Some frequently asked questions with answers:</h2>
<br>
<br>
<h2 class="question">What services do you provide?</h2>
<h3 class="answer">A whole range of services is on offer, from patio and driveway cleaning to roof and conservatory cleaning! Feel free to check out the services offered on the 'Home' page. If you still have a question, or would like to enquire about another service, feel free to access the 'Contact' page and get in touch any time.</h3>
<h2 class = "question">What are your prices?</h2>
<h3 class = "answer">It's always difficult to provide an accurate quote without first assessing the job. However, Mark will happily provide a free no obligation quote - you may be surprised!</h5>
<br>
<h2 class = "question">Are you able to clean rooves on houses?</h2>
<h3 class = "answer">Yes! Mark's reach isn't limited to bungalows, conservatories and annexes. With his state-of-the-art equipment, he will be able to clean all the moss and dirt from house rooves too!</h5>
<h2 class="question">Do I need to provide anything?</h2>
<h3 class="answer">Here at Commercial Cleaning, we will provide all tools and chemicals required to clean the job. However, there may need to be an access for water - this is more possible with larger jobs. But rest assured, there will be no cost to you - the cost of water will be deducted from your final invoice!</h3>
<BR><BR> <br> <br> <br><br> <BR>
<BR><br><br> <br><br><BR><br><br> <br><br>
</div>
</div>
<div class="right-column" id="right-col-home">
This is right column.
</div>
</div>
</div>
<div id="aFooter">
<center> <h1>Footer</h1>
<div id="header-content"> © 2022 | commercialcleaning.com | Designed by Kieran| </div>
<center>
</div>
</body>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/508201.html
下一篇：帶旋轉半徑的圓