页脚元素不会保留在页面底部

Question

https://github.com/blakeschollmeyer/Portfolio

这是指向我的存储库的链接。我不知道如何让社交媒体（a 标签）保留在“页脚”中主页的中心和底部。

@import 'http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css';

html, body {
    margin: 0;
    padding: 0;
    /* Can set a % height on our container div later */
    height: 100%;
    font-family: "Ubuntu", "Courier New", "Times New Roman", "sans-serif";
}

h1 {
    font-size: 24px;
    margin: 0;
}

p {
    font-size: 12px;
    margin: 0;
    padding: 20px;
}

.container {
    /* Ensures full height of screen */
    min-height: 100%;
    margin: 0;
    padding: 0;
    /* Allows to position elements inside later */
    position:relative;
}

#header {

}

#body {
    /* Height of the footer */
    padding-bottom: 250px;
}

/* DECIDE WHETHER TO USE OR NOT FOR PARAGRAPH TEXT (NOT CURRENTLY IN USE) */
.content {
    width: 90%;
    margin: 4em auto;
    line-height: 30px;
    text-align: justify;
}

.logo {
    line-height: 60px;
    position: fixed;
    float: left;
    margin: 16px 46px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
}

nav {
    position: fixed;
    width: 100%;
    line-height: 60px;
}

nav ul {
    line-height: 60px;
    list-style: none;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    color: #fff;
    padding: 0;
    text-align: right;
    margin: 0;
    padding-right: 40px;
    transition: 1s;
}

nav.black ul {
    background: #000;
}

nav ul li {
    display: inline-block;
    padding: 16px 40px;;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
}

.text-container {
    /* Used for centering h1 and p tags inside the parallax container */
    color: white;
    text-align: center;
    padding: 150px 0px 0px 0px;
}

#parallax-1 {
    height: 100vh;
    width: 100%;
    background-image: url(images/image0.jpeg);
    background-size: cover;
    /* Creates the parallax effect */
    background-attachment: fixed;
}

#parallax-2 {
    height: 100vh;
    width: 100%;
    background-image: url(images/image2.jpeg);
    background-size: cover;
    background-attachment: fixed;
}

#parallax-3 {
    height: 100vh;
    width: 100%;
    background-image: url(images/image3.jpeg);
    background-size: cover;
    background-attachment: fixed;
}

#parallax4 {
    height: 100vh;
    width: 100%;
    background-image: url(images/image4.jpeg);
    background-size: cover;
    background-attachment: fixed;
}

#parallax5 {
    height: 100vh;
    width: 100%;
    background-image: url(images/image5.jpeg);
    background-size: cover;
    background-attachment: fixed;
}

.footer {
    position: absolute;
    /* Moves footer div to the bottom of the container div */
    bottom: 0;
    width: 100%;
    /* If changed, do so with #body also */
    height: 250px;
}

.footer a {
    text-decoration: none;
    border-radius: 7.5px;
    font-size: 40px;
    margin: 10px;
    display: flex;
    width: 60px;
    height: 60px;
    justify-content: center;
    align-items: center;
    float: left;
    transition: 0.5s all;
    cursor: pointer;
}

.footer a:hover {
    margin-top: -10px;
}

.in {
    color: white;
    background: #0984e3;
}

.git {
    color: white;
    background: #2d3436;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- PAGE CONTAINER -->
    <div id="container">

        <!-- HEADER -->
        <div id="header">
            <header>
                <nav>
                    <div class="logo">
                        LOGO
                    </div>
                    <div>
                        <ul>
                            <li><a href="home.html">Home</a></li>
                            <li><a href="about.html">About Me</a></li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                    </div>
                </nav>
            </header>
        </div>

        <!-- BODY -->
        <div id="body">
            <div id="parallax-1" class="text-container">
                <h1>Blake Schollmeyer</h1>
                <p>Front End-Web Developer | Co-Owner of BrandNewAgain.com</p>
            </div>
            <div id="parallax-2">
                <p></p>
            </div>
            <div id="parallax-3">
                <p></p>
            </div>
        </div>

        <!-- FOOTER -->
        <div class="footer">
            <footer>
                <nav>
                    <a class="in ion-social-linkedin" href="https://www.linkedin.com/in/blake-schollmeyer-717a45142"></a>
                    <a class="git ion-social-github" href="https://github.com/blakeschollmeyer"></a>
                </nav>
            </footer>
        </div>
    </div>
    <!-- CONTAINER END -->


    <!-- jQuery -->
    <script type="text/javascript">
        // Menu-toggle button
        $(document).ready(function() {
            $(".menu-icon").on("click", function() {
                $("nav ul").toggleClass("showing");
            });
        });
        // Scrolling Effect
        $(window).on("scroll", function() {
            if($(window).scrollTop()) {
                $('nav').addClass('black');
            }
            else {
                $('nav').removeClass('black');
            }
        });
    </script>

Answer 1

你需要让整个页脚成为一个弹性框，而不仅仅是 a 标签。

.footer {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

Answer 2

添加

.footer nav {
  bottom: 0px;
}

成功了。您不能将固定元素包含在另一个绝对元素中，因为a fixed is already an absolutely positioned element。

html, body {
    margin: 0;
    padding: 0;
    /* Can set a % height on our container div later */
    height: 100%;
    font-family: "Ubuntu", "Courier New", "Times New Roman", "sans-serif";
}

h1 {
    font-size: 24px;
    margin: 0;
}

p {
    font-size: 12px;
    margin: 0;
    padding: 20px;
}

.container {
    /* Ensures full height of screen */
    min-height: 100%;
    margin: 0;
    padding: 0;
    /* Allows to position elements inside later */
    position:relative;
}

#header {

}

#body {
    /* Height of the footer */
    padding-bottom: 250px;
}

/* DECIDE WHETHER TO USE OR NOT FOR PARAGRAPH TEXT (NOT CURRENTLY IN USE) */
.content {
    width: 90%;
    margin: 4em auto;
    line-height: 30px;
    text-align: justify;
}

.logo {
    line-height: 60px;
    position: fixed;
    float: left;
    margin: 16px 46px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
}

nav {
    position: fixed;
    width: 100%;
    line-height: 60px;
}

nav ul {
    line-height: 60px;
    list-style: none;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    color: #fff;
    padding: 0;
    text-align: right;
    margin: 0;
    padding-right: 40px;
    transition: 1s;
}

nav.black ul {
    background: #000;
}

nav ul li {
    display: inline-block;
    padding: 16px 40px;;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
}

.text-container {
    /* Used for centering h1 and p tags inside the parallax container */
    color: white;
    text-align: center;
    padding: 150px 0px 0px 0px;
}

#parallax-1 {
    height: 100vh;
    width: 100%;
    background-image: url(images/image0.jpeg);
    background-size: cover;
    /* Creates the parallax effect */
    background-attachment: fixed;
}

#parallax-2 {
    height: 100vh;
    width: 100%;
    background-image: url(images/image2.jpeg);
    background-size: cover;
    background-attachment: fixed;
}

#parallax-3 {
    height: 100vh;
    width: 100%;
    background-image: url(images/image3.jpeg);
    background-size: cover;
    background-attachment: fixed;
}

#parallax4 {
    height: 100vh;
    width: 100%;
    background-image: url(images/image4.jpeg);
    background-size: cover;
    background-attachment: fixed;
}

#parallax5 {
    height: 100vh;
    width: 100%;
    background-image: url(images/image5.jpeg);
    background-size: cover;
    background-attachment: fixed;
}

.footer {
    position: absolute;
    /* Moves footer div to the bottom of the container div */
    bottom: 0;
    width: 100%;
    /* If changed, do so with #body also */
    height: 250px;
}

.footer a {
    text-decoration: none;
    border-radius: 7.5px;
    font-size: 40px;
    margin: 10px;
    display: flex;
    width: 60px;
    height: 60px;
    justify-content: center;
    align-items: center;
    float: left;
    transition: 0.5s all;
    cursor: pointer;
}

.footer nav {
  bottom: 0px;
}

.footer a:hover {
    margin-top: -10px;
}

.in {
    color: white;
    background: #0984e3;
}

.git {
    color: white;
    background: #2d3436;
}

<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- PAGE CONTAINER -->
    <div id="container">

        <!-- HEADER -->
        <div id="header">
            <header>
                <nav>
                    <div class="logo">
                        LOGO
                    </div>
                    <div>
                        <ul>
                            <li><a href="home.html">Home</a></li>
                            <li><a href="about.html">About Me</a></li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                    </div>
                </nav>
            </header>
        </div>

        <!-- BODY -->
        <div id="body">
            <div id="parallax-1" class="text-container">
                <h1>Blake Schollmeyer</h1>
                <p>Front End-Web Developer | Co-Owner of BrandNewAgain.com</p>
            </div>
            <div id="parallax-2">
                <p></p>
            </div>
            <div id="parallax-3">
                <p></p>
            </div>
        </div>

        <!-- FOOTER -->
        <div class="footer">
            <footer>
                <nav>
                    <a class="in ion-social-linkedin" href="https://www.linkedin.com/in/blake-schollmeyer-717a45142"></a>
                    <a class="git ion-social-github" href="https://github.com/blakeschollmeyer"></a>
                </nav>
            </footer>
        </div>
    </div>
    <!-- CONTAINER END -->


    <!-- jQuery -->
    <script type="text/javascript">
        // Menu-toggle button
        $(document).ready(function() {
            $(".menu-icon").on("click", function() {
                $("nav ul").toggleClass("showing");
            });
        });
        // Scrolling Effect
        $(window).on("scroll", function() {
            if($(window).scrollTop()) {
                $('nav').addClass('black');
            }
            else {
                $('nav').removeClass('black');
            }
        });
    </script>