为什么我的页脚在导航栏而不是底部？答案

【问题标题】：Why is my footer on my navigation bar and not at the bottom?为什么我的页脚在导航栏而不是底部？
【发布时间】：2019-12-04 07:00:19
【问题描述】：

我的页脚定位有问题。我的页脚是放置在页面顶部的导航栏上。取而代之的是页脚应分配在网页的底部。这我尝试的更改是删除不属于的位置属性绝对并试图将页脚放在正文标签之外，但有没有成功。

我哪里出了问题？

<!DOCTYPE html>
<html>
<head>
 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">   
<style>
   body {
    /* font: 15px/1.5 Arial, Helvetica, sans-serif; */
    font-family: 'Open Sans', sans-serif;

    padding:0;
    margin-left:  0px;
    margin-right:  0px;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 0px;

    background: linear-gradient(90deg, #D3D3D3 0%, rgb(255,255,255) 10%, rgb(255,255,255) 90%, #D3D3D3 100%);   
}
.CLASSNAME {
    position:relative

} 


* {

}

/*Global*/
.container{
    width:1400px;
    margin:auto;
    overflow:hidden;
}

a{
    text-decoration: none;
}

/*Font*/
@font-face {
    font-family: theboldfont;
    src: url(font/theboldfont.ttf)
}

ul {
    position: absolute;
    top: 0px;
    right: 16px;
}

/*Header*/
header{
    background: #19252A;
    color: #ffffff;
    padding-top: 5px;
    min-height: 70px;
}

header a{
    color: #ffffff;
    text-align: center;
    text-decoration:none;
    text-transform: uppercase;
    font-size:11px;
    font-weight: bold;
    padding: 0px; 
}

header li{
    /*float:left;*/
    display:inline;
    padding: 0 5px 0 5px; 
}

.logo{
    padding-left: 75px;
    padding-bottom: 1px;
    padding-top: 2px;
}

nav{
    width: 100%;
    display: inline-block;
}

header nav{
    float:right;
    margin-top:10px;
}

header .highlight, header .current a{
    color:#e8491d;
    font-weight:bold;

}

header a:hover{
    color:#cccccc;
    font-weight:bold;
}



/*Learn more section*/
.learn-more{
    background: #fff;
    height: 100%;
    width: 100%; 
    top: 20px;
}

.learn-more-message{
    border-bottom: 30px;
    padding-bottom: 0px;
}

.learn-more-message p {
    text-align: center;
    font-weight: bold;
    padding: 30px 125px 20px 125px;
    border-bottom: 0px;
    border-top: 0px;
    margin-bottom: 0px;
    margin-top: 0px; 
}

.learn {
    display: inline-block;
    width: 175px;
    margin: 5px; /* space between buttons */
    background: deeppink; /* background color */
    color: white; /* text color */
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px; /* rounded corners */
    padding: 0px; /* space around text */
    padding-bottom: 10px;
    padding-top: 10px;
    border: 0px;   
    font-family: theboldfont;
    }

.join{
    display: inline-block;
    width: 175px;
    margin: 5px; /* space between buttons */
    background: deeppink; /* background color */
    color: white; /* text color */
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px; /* rounded corners */
    padding: 0px; /* space around text */
    padding-bottom: 10px;
    padding-top: 10px;
    border: 0px;
    font-family: theboldfont;
    }

div .grid-item1{
    width: 150px;
}


div .grid-container1{
    justify-content: center;
    align-items: center;
    text-align: center;
}



/*Find Us Map*/
.find-us-map {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%;
}

.find-us, .map, .artcle {
    flex-basis: 100%;
    margin-bottom: 0px;
}

@media screen and (min-width: 800px) {
.find-us {
    flex: 3;
    background-color: #fff;
}

.img {
    height: 250px;    
}

.map {
    flex: 5;   
}

.article {
    flex: 6;
}

.article img{
    background-repeat: no-repeat;
    width: 100%;
    height: 250px;
}

.map img{
    background-repeat: no-repeat;
    width: 100%;
    height: 250px;
}

/*Picture/Message Box*/
.pm-box {
    display: flex;
    height: 150px; 
    border-bottom: 15px solid #fff;
}

.picture {
    flex: 2;
    background: #19252A;
}

.message {
    flex: 8;
    background: #19252A;
    padding-right: 70px;
    margin: none;
    padding-top: 25px;             
}

    .message p {
        font-family: 'Roboto', sans-serif;
    }


.circle {
    width: 100px;
    height: 100px;
    border-radius:80px;
    background: white;
    margin: 0;
    position:relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 5px solid black;
}

/*Footer*/

        *{
    font-family: 'Open Sans', sans-serif;
}

     i {
    font-family: FontAwesome !important;
         padding-left: 15px;
  }
    i.fa.fa-facebook {
    font-family: FontAwesome !important;
         padding-left: 20px;
  } 

footer {
         background: #19252A;
        position:fixed;
    bottom:0;
    width:100%;
    height:100px;
    }

       .footer-container{
    width:1000px;
    margin:0;
    overflow:hidden;
}



 .footer-container p{
     position: absolute;
    top: 35px;
    float: left;
    color: #fff;
    font-size: 10px;    
}
    .footer-container{
        height:100px;
        margin-left: 10px;
    }

    .footer-container ul{
        display: flex;
        float: right;

    }

   .footer-container ul li{
        list-style: none;
    }

    .footer-container ul li a {
        width: 60px;
        height: 60px;
        background: #fff;
        text-align: centre;
        line-height: 60px;
        font-size: 35px;
        margin: 0 10px;
        display: block;
        border-radius: 50%;
        position: relative;
        overflow: hidden;
        border: 3px solid #fff;
        z-index: 1;

    }

    .footer-container ul li a .fa {
        position: relative;
        color: #262626;
        transition: .5s;
        z-index: 3;
    }

    .footer-container ul li a:hover .fa {
        color: #fff;
        transform: rotateX(360deg);
    }

    .footer-container ul li a:before {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: #f00;
        transition: .5s;
        z-index: 2;
    }

    .footer-container ul li a:hover:before {
        top: 0;

    }

    .footer-container ul li:nth-child(1) a:before{
        background: #3b5999;
    }
    .footer-container ul li:nth-child(2) a:before{
        background: #55acee;
    }
    .footer-container ul li:nth-child(3) a:before{
        background: #cd201f;
    }
    .footer-container ul li:nth-child(4) a:before{
        background: #e4405f;
    }



</style>
</head>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" conftent="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Nature Tours | Home</title>
    <!--Ion Icons-->
    <link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
    <!--Google Fonts-->
    <link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Aldrich&display=swap" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <!--Our own stylesheet-->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <script type="text/javascript" src="scripts.js"></script>
    <header>
        <div class="container">
            <div class="CLASSNAME">
                <div>
                    <a href="index.html">
                        <img class="logo" src="img/stars-logo.png" alt="" />
                    </a>


                    <nav>
                        <ul>
                            <li><a href="">About Us</a></li>
                            <li><a href="workshops.html">Workshops</a></li>

                        </ul>
                    </nav>
                </div>


            </div>
        </div>
    </header>





    <div class="container">
        <div class="learn-more-message">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
            </p>

            <div class="grid-container1">

                <a class="learn"
                   title="Relevant Title"
                   href="#">Learn More</a>

                <a class="join"
                   title="Relevant Title"
                   href="join-our-school.html">Join Our School</a>


            </div>
        </div>
    </div>


 <!--   <section class="Learn-more-buttons">
    </section> -->



    <div class="container">
        <div class="pm-box">
            <div class="picture">
                <div class="circle">
                </div>

            </div>

            <div class="message">
                <p style="color: #ffffff">

                    "Sed tristique augue tellus. Vestibulum sagittis vestibulum nibh, at rutrum nisi faucibus eu. Mauris eget nisl eleifend, dignissim ante vel, convallis eros. Phasellus urna eros, facilisis et faucibus sit amet, bibendum quis diam. Curabitur ornare ultricies pulvinar."<br />
                    <br />
                    -Napet, COMOGET Seque.

                </p>
            </div>

        </div>
    </div>




<div class="container"> 
        <div class="footer-container">


                    <p>
                      ######################################
                    </p>

                     <ul>
        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
        <li><a href="#"><i class="fa fa-youtube"></i></a></li>
        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
      </ul> 






        </div>
    </div>




    <script>type = "text/javascript" src="scripts.js</script>
</body>
</html>

【问题讨论】：

让它成为一个有效的 sn-p，你会更快地获得更多帮助

标签： html css footer

【解决方案1】：

将您的页脚更改为使用relative 位置而不是absolute

ul {
    position: relative;
    top: 0px;
    right: 16px;
}

【讨论】：