如何將頁腳元素添加到我的兩欄網站頁面的底部？
[英]How do I add the footer element to the bottom of my two column website page?
問題描述
圖片供參考。 https://i.stack.imgur.com/njBYz.png
我目前正在為我的 html 和 css Web 開發課程制作最終網站。 我一直遇到的一個問題是在我唯一的 2 列頁面上，頁腳左對齊。 我希望頁腳位於兩列區域下方，但仍包含在#wrapper 中。 此外，當我向頁腳區域添加背景顏色時，它也會將其添加到 2 列部分。 我認為它們以某種方式連接，但我不知道如何解決它。
body { background-image: url(map.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; font-family: "Lucida Console", "Courier New", monospace; } h1 { text-align: center; font-size: 3em; background-color: #ffca68; } nav { text-align: center; } section { float: left; } .left { float: left; width: 30%; padding-bottom: 5px; } .right { float: right; width: 70%; } footer { text-align: center; } #map { display: block; margin-left: auto; margin-right: auto; width: 70%; } div nav { font-size: 2em; } #wrapper { width: 80%; margin-right: auto; margin-left: auto; border-top: none; background-color: #ffe5b4; min-width: 900px; max-width: 1280px; border: 2px solid #ffca68; border-top: none } main { padding-left: 7.5px; padding-right: 7.5px; } a { text-decoration: none; } footer { text-align: center; }
<!DOCTYPE html> <html lang="en-US"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <head> <title>OSHelper Resources</title> <link rel="stylesheet" href="oshelper.css"> </head> <div id="wrapper"> <header> <h1>OSHelper Resources</h1> </header> <body> <nav> <a href="index.html">Home</a> <a href="guides.html">Guides</a> <a href="resources.html">Resources</a> <a href="advice.html">Advice</a> </nav> <main> <h2>Resources for your benefit</h2> <p> This is where we keep and organize the many resources that you are sure to use while you play this game. From calculators and wikis to guides created by other players.</p> <div class="right"> <h3>OSRS Wiki</h3> <p>This is the official wiki page for the game. It is extremely helpful for every player. It has information about quests, items, monsters, activities, and much more. We recommend using this everytime you have a question about the game.</p> <h3>Runelite Client</h3> <p>This is a very helpful client for playing the game. Clients are used to play the game, but they have especially helpful plugins and other useful tools that can be used while playing the game. This client is the most popular and helpful client out there. </p> <h3>Oldschool Tools</h3> <p>Very useful website. It housed many different calculators, but most notably their skill calculators. These calculators tell you how much you need to train and how much in game currency you will need to spend to level up each skill.</p> <h3>Official OSRS Website</h3> <p>This is the official website. You can access your account and other official resources here. Again, be careful of fake sites that will try and steal your information.</p> <h3>OSRS Guide</h3> <p>Your one stop shop for many different guides reguarding the game. From beginner to advanced guides, you will definitely get some use out of this site.</p> </div> <div class="left"> <nav> <a href="https://oldschool.runescape.wiki"><img src="wiki.jpg" alt="Wiki"></a><br> <a href="https://runelite.net"><img src="runelite.jpg" alt="Runelite"></a><br> <a href="https://oldschool.tools"><img src="tools.jpg" alt="Oldschool Tools" height="110"></a><br> <a href="https://www.oldschool.runescape.com"><img src="official.jpg" alt="Official" height="100"></a><br> <a href="https://www.osrsguide.com"><img src="guide.jpg" alt="OSRS Guide" height="110"></a><br> </nav> </div> </main> </body> <footer> Copyright © 2022 OSHelper </footer> </html>
1 個解決方案
解決方案1
2 2022-07-14 01:55:25
由於您尚未清除浮動，因此出現此問題。 “浮動清除”有多種方法。 以下是一些解決方案：
1.使用清晰
.clear {
clear: both;
}
<main>
<h2></h2>
<p> </p>
<div class="right"></div>
<div class="left"></div>
<div class="clear"></div>
</main>
或者
2.使用溢出：隱藏
.main {
overflow:hidden;
}
解決方案2
0 2022-07-14 01:58:17
您的 HTML 無效。 請參閱下面的更改。 所有內容都需要在body中。
刪除所有float's . 我用flex替換了它，並為.left和.right添加了一個新的父級。 稱之為.flex-wrapper 。
然后只需向.wrapper添加一個height並使用position: absolute; 在footer 。 然后只需添加一些填充。
html, body { height: 100%; } body { background-image: url(map.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; font-family: "Lucida Console", "Courier New", monospace; } h1 { text-align: center; font-size: 3em; background-color: #ffca68; } nav { text-align: center; } .left { width: 30%; padding-bottom: 5px; } .right { width: 70%; } footer { text-align: center; } #map { display: block; margin-left: auto; margin-right: auto; width: 70%; } div nav { font-size: 2em; } #wrapper { width: 80%; margin-right: auto; margin-left: auto; border-top: none; background-color: #ffe5b4; /*min-width: 900px;*/ max-width: 1280px; border: 2px solid #ffca68; border-top: none height: 100%; min-height: 100%; position: relative; } .flex-wrapper { display: flex; } main { padding-left: 7.5px; padding-right: 7.5px; padding-bottom: 2em; } a { text-decoration: none; } footer { text-align: center; position: absolute; bottom: 1em; width: 100%; }
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>OSHelper Resources</title> <link rel="stylesheet" href="oshelper.css"> </head> <body> <div id="wrapper"> <header> <h1>OSHelper Resources</h1> </header> <nav> <a href="index.html">Home</a> <a href="guides.html">Guides</a> <a href="resources.html">Resources</a> <a href="advice.html">Advice</a> </nav> <main> <h2>Resources for your benefit</h2> <p> This is where we keep and organize the many resources that you are sure to use while you play this game. From calculators and wikis to guides created by other players.</p> <div class="flex-wrapper"> <div class="right"> <h3>OSRS Wiki</h3> <p>This is the official wiki page for the game. It is extremely helpful for every player. It has information about quests, items, monsters, activities, and much more. We recommend using this everytime you have a question about the game.</p> <h3>Runelite Client</h3> <p>This is a very helpful client for playing the game. Clients are used to play the game, but they have especially helpful plugins and other useful tools that can be used while playing the game. This client is the most popular and helpful client out there. </p> <h3>Oldschool Tools</h3> <p>Very useful website. It housed many different calculators, but most notably their skill calculators. These calculators tell you how much you need to train and how much in game currency you will need to spend to level up each skill.</p> <h3>Official OSRS Website</h3> <p>This is the official website. You can access your account and other official resources here. Again, be careful of fake sites that will try and steal your information.</p> <h3>OSRS Guide</h3> <p>Your one stop shop for many different guides reguarding the game. From beginner to advanced guides, you will definitely get some use out of this site.</p> </div> <div class="left"> <nav> <a href="https://oldschool.runescape.wiki"><img src="wiki.jpg" alt="Wiki"></a><br> <a href="https://runelite.net"><img src="runelite.jpg" alt="Runelite"></a><br> <a href="https://oldschool.tools"><img src="tools.jpg" alt="Oldschool Tools" height="110"></a><br> <a href="https://www.oldschool.runescape.com"><img src="official.jpg" alt="Official" height="100"></a><br> <a href="https://www.osrsguide.com"><img src="guide.jpg" alt="OSRS Guide" height="110"></a><br> </nav> </div> </div> </main> <footer> Copyright © 2022 OSHelper </footer> </div> </body> </html>
如何使用當前構建的內容向網站的頁腳添加粘性元素？
[英]How do I add a sticky element to the footer of my website with what I currently have built?
如何使用Google Chrome瀏覽器將頁腳停留在頁面底部？
[英]How do I stick my footer to bottom of the page with Google Chrome?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.