我正在尝试制作我的第一个网站布局，在尝试向页脚中的 div 添加背景颜色之前，样式一直很顺利。它随机出现在页面中。我知道这可能与我使用过的其他一些风格有关，但我无法分辨是哪一种，因为我没有太多经验。任何关于为什么会发生这种情况的帮助都会很棒。
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: #dce6f7;
font-family: sans-serif;
letter-spacing: .5px;
}
p {
font-family: 'Barlow Condensed', sans-serif;
color: #3f4042;
font-size: 18px;
line-height: 150%;
padding: 1%;
text-indent: 2%;
text-align: justify;
}
h3 {
font-size: 30px;
line-height: 150%;
}
h2 {
font-size: 40px;
}
#logo {
height: 60px;
width: 60px;
}
#main-image {
display: block;
width: 100%;
height: 500px;
margin: 0 auto;
border-top: solid 10px #2b477c;
}
a {
color: #3a3b3d;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #476bb2;
}
header {
width: 100%;
height: 60px;
top: 0;
left: 0;
}
#logo {
margin: 20px;
float: left;
height: 60px;
}
.main-nav {
float: right;
padding: 30px 20px 0 0;
}
.nav-backdrop {
width: 100%;
height: 50px;
background-color: #2b477c;
}
ul li {
list-style: none;
font-family: 'Barlow Condensed', sans-serif;
font-size: 25px;
font-weight: bold;
display: inline-block;
float: left;
padding: 0 15px 0 15px;
}
.intro-text h2 {
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
}
.one-half-wrap {
width: 50%;
float: left;
text-align: justify;
text-align: center;
}
.section-header {
font-family: 'Barlow Condensed', sans-serif;
margin-top: 20px;
}
.paragraph-text {
margin: 0px 20px 20px 20px;
}
.skill-title {
text-align: center;
font-family: 'Montserrat', sans-serif;
}
.one-third-padding {
width: 29%;
float: left;
margin: 2% 2%;
text-align: justify;
}
.one-third-padding img {
width: 300px;
height: 200px;
margin-left: 30px;
border-radius: 5px;
}
.col-text {
margin-top: 15px;
font-size: 20px;
}
#footer-container {
Width: 100%;
height: 50px;
margin: 0 auto;
border: 1px solid black;
}<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Practice Website</title>
<link rel="stylesheet" href="Practice.css">
<link href="https://fonts.googleapis.com/css?family=Barlow+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<!--Top Nav Bar-->
<div class="header-wrapper">
<header>
<div class="header-inner">
<img src="logo.png" id="logo">
<nav class="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!--Main Image-->
<div class="image wrapper">
<img src="mainimg.png" id="main-image">
</div>
<div class="intro-text">
<h2>Welcome To Our Website</h2>
</div>
<!--Page columns-->
<div class="one-half-wrap">
<td>
<h3 class="section-header">Heading Title Section</h3>
<p class="paragraph-text">Lorem ipsum dolor amet cray truffaut gentrify ramps, chartreuse waistcoat brooklyn copper mug lo-fi taxidermy gluten-free drinking vinegar. Ugh stumptown banh mi hot chicken, keytar jianbing humblebrag. Kinfolk crucifix unicorn bicycle rights subway tile disrupt readymade fam vinyl kombucha man bun small batch hammock swag coloring.</p>
</td>
</div>
<!--Column 2-->
<div class="one-half-wrap">
<td>
<h3 class="section-header">Heading Title Section</h3>
<p class="paragraph-text">Lorem ipsum dolor amet cray truffaut gentrify ramps, chartreuse waistcoat brooklyn copper mug lo-fi taxidermy gluten-free drinking vinegar. Ugh stumptown banh mi hot chicken, keytar jianbing humblebrag. Kinfolk crucifix unicorn bicycle rights subway tile disrupt readymade fam vinyl kombucha man bun small batch hammock swag coloring.</p>
</td>
</div>
<!--End columns-->
<div>
<section class="one-third-padding">
<h3 class="skill-title">Our Skills One</h3>
<img src="columnimg1.png" class="col-img">
<p class="col-text">Ugh stumptown banh mi hot chicken, keytar jianbing humblebrag. Kinfolk crucifix unicorn bicycle rights subway tile disrupt readymade fam vinyl kombucha man bun small batch hammock swag coloring book.</p>
</section>
<section class="one-third-padding">
<h3 class="skill-title">Our Skills Two</h3>
<img src="columnimg2.png" class="col-img">
<p class="col-text">Ugh stumptown banh mi hot chicken, keytar jianbing humblebrag. Kinfolk crucifix unicorn bicycle rights subway tile disrupt readymade fam vinyl kombucha man bun small batch hammock swag coloring book.</p>
</section>
<section class="one-third-padding">
<h3 class="skill-title">Our Skills Three</h3>
<img src="columnimg3.png" class="col-img">
<p class="col-text">Ugh stumptown banh mi hot chicken, keytar jianbing humblebrag. Kinfolk crucifix unicorn bicycle rights subway tile disrupt readymade fam vinyl kombucha man bun small batch hammock swag coloring book.</p>
</section>
</div>
<div class="footer-wrapper">
<footer>
<div id="footer-container">
<img src="logo.png" id="logo">
<nav class="footer-nav">
<ul class="nav-text">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a> </li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</footer>
</div>
</div> <!--End of wrapper-->
</div>
</body>
</html>最佳答案
您必须通过添加 position as fixed 来固定 div 元素的位置，并且颜色保留在元素内。
#footer-container {
Width: 100%;
height: 50px;
margin: 0 auto;
border: 1px solid black;
background-color:pink;
bottom:0;
position:fixed;
background-size:cover;
}//it works good
关于html - div出现在随机位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47450312/