如何将页脚元素添加到我的两栏网站页面的底部？
[英]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.