【发布时间】：2021-11-30 08:50:01
【问题描述】：
我正在尝试建立自己的网站，但似乎在页脚处失败，尽管设置为 100%，但它不会是全宽。导航栏覆盖了 100% 的宽度，但页脚始终保持居中并在左右两侧留有空隙。当我只使用导航栏代码时，网站可以正常工作但没有页脚。当我只使用页脚代码时，网站可以正常工作，但没有导航栏。我一尝试将代码放在一起就失败了，我非常感谢任何提示！感谢您的帮助 - 我是一个残酷的初学者，我根本无法解决这个问题。谢谢！
**HTML:**
<!DOCTYPE html>
<html lang="en ">
<head>
<meta charset="utf-8">
<title>Moritz </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<nav class="navbar">
<img class="logo" src="logo.png">
<ul>
<li> <a class="active" href="#">Home</a></li>
<li> <a href="#">About</a></li>
<li> <a href="#">CV</a></li>
<li> <a href="#">Favourites</a></li>
<li> <a href="#">Contact</a></li>
</ul>
</nav>
<div class="center">
<h1>Hi, I'm Moritz.</h1>
<h2>I'm a student.</h2>
<div class="buttons">
<button>Explore more</button>
<button class="btn">Contact me</button>
</div>
<!-- Begin Footer -->
<footer>
<div class="footer-content">
<h3>Moritz </h3>
<p>Thank you for browsing. I hope to hear from you soon!</p>
<ul class="socials">
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
<li><a href="#"><i class="fa fa-envelope"></i></a></li>
<li><a href="#"><i class="fa fa-phone"></i></a></li>
</ul>
</div>
<div class="footer-bottom">
<p> Copyright © 2021 Moritz </p>
</div>
</footer>
<!-- End Footer -->
</body>
</html>
**CSS:**
@import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
*{
padding: 0;
margin: 0;
}
body{
background-color: ghostwhite;
background-size: cover;
padding: 0;
margin: 0;
}
.navbar{
height: 80px;
width: 100%;
background-color: #808080;
}
.logo{
width: 140px;
height: auto;
padding: 15px 50px;
}
.navbar ul{
float: right ;
margin-right: 20px;
}
.navbar ul li{
list-style: none;
margin: 0 8px;
display: inline-block;
line-height: 80px;
}
.navbar ul li a{
text-decoration: none;
color: white;
font-size: 20px;
padding: 2px 6px;
font-family: 'Roboto', sans-serif;
transition: .2s;
}
.navbar ul li a:hover{
background: lightsteelblue;
border-radius: 2px;
}
.wrapper .center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: sans-serif;
user-select: none;
}
.center h1{
color: black;
font-size: 70px;
font-weight: bold;
width: 900px;
text-align: center;
}
.center h2{
color: black;
font-size: 70px;
font-weight: bold;
width: 885px;
margin-top: 10px;
text-align: center;
}
.center .buttons{
margin: 35px 280px;
}
.buttons button {
height: 50px;
width: 150px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: lightsteelblue;
border: 1px solid #4b79b4;
outline: none;
cursor: pointer;
border-radius: 25px;
transition: .5s;
}
.buttons .btn{
margin-left: 25px;
}
.buttons button:hover{
background: #4b79b4;
}
footer{
position: absolute;
background-color: #808080;
height: auto;
width: 100%;
padding-top: 40px;
color: black;
}
.footer-content{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3{
font-size: 1.8rem;
font-weight: 400;
text-transform: capitalize;
line-height: 3rem;
}
.footer-content p{
max-width: 500px;
margin: 10px auto;
line-height: 28px;
font-size: 14px;
}
.socials{
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.socials li{
margin: 0 10px;
}
.socials a{
text-decoration: none;
color: lightsteelblue;
}
.socials a i{
font-size: 1.1rem;
transition: color .4s ease;
}
.socials a:hover i{
color: #4b79b4;
}
.footer-bottom{
background-color: #737373;
width: 100%;
padding: 20px 0;
text-align: center;
}
.footer-bottom p{
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
}
.footer-bottom span{
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
【问题讨论】：
-
如果您使用浏览器的检查器（通常，右键单击页脚并在弹出菜单中选择检查选项 - 您可能需要启用开发人员工具才能显示），它是做什么的显示？这是一种非常有用的方法，可以准确查看元素应用了哪些样式，因为它既显示了应用的计算样式，也显示了样式表中负责的特定行。
-
它告诉我应用了 100% 的宽度。一旦我取出宽度：100％；页脚明显变小了……
-
感谢您向我展示检查器工具！
-
任何答案都解决了您的问题吗？