Question

我正在尝试制作我的第一个网站布局，并且样式正常，直到尝试向页脚中的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>

Answer 1

您必须通过添加固定的postion来固定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

div出现在随机的地方

1 个答案: