Question

我正在为网站创建页脚，并且希望将页脚固定在底部。但是当我向下滚动时，它不会与文档一起显示。它始终位于页面底部。我已经将页脚初始化为position：absolute，还添加了我的CSS代码的bottom：0。但是它仍然停留在页面中间。我该如何解决每个人？

.footer {
  background-color: red;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  .upper-footer,
  .lower-footer {
    padding: 10px 0 33px 0;
    margin: 0;
    width: 100%;
  }
  .upper-footer {
    background: #252525;
    .upper-footer-links {
      float: left;
      position: relative;
      margin: 3px -3px;
      a {
        text-decoration: none;
        color: #ffffff;
      }
      .span {
        position: inherit;
        right: -1px;
        color: #7b7b7b;
      }
    }
  }
  .lower-footer {
    background: #3c3c3c;
    height: 74px;
    .footer-information {
      float: left;
      width: 458px;
      p {
        line-height: 23px;
        margin: 15px 0;
        color: #9b9b9b;
      }
    }
    .footer-sns-links {
      float: right;
      padding: 28px 0;
      ul {
        list-style: none;
        display: inline;
        li {
          display: inline-block;
          border: 1px solid #686868;
          padding: 8px;
          &:hover {
            background-color: #373737;
          }
        }
      }
    }
  }
}

<div class="footer">
  <div class="upper-footer">
    <div class="wrapper">
      <div class="upper-footer-links">
        <a href="#">개인정보처리방침</a>&nbsp; <span>|</span> &nbsp;
        <a href="#">이메일무단수집거부</a>&nbsp; <span>|</span> &nbsp;
        <a href="#">사이트맵</a>&nbsp; <span>|</span> &nbsp;
        <a href="#">찾아오시는 길</a>
      </div>
    </div>
  </div>
  <div class="lower-footer">
    <div class="wrapper">
      <div class="footer-information">
        <p class="footer-info">02841 서울특별시 성북구 안암로 145 크림슨창업지원단 &nbsp;|&nbsp; TEL : 02.3290.4810 &nbsp;|&nbsp; E-MAIL : startup@korea.ac.kr<br>COPYRIGHT(C)2018 KOREA UNIVERSITY. ALL RIGHTS RESERVED.</p>
      </div>
      <div class="footer-sns-links">
        <ul>
          <li><img href="#" src="images/icon/icon_ss_02.png"></li>
          <li><img href="#" src="images/icon/icon_ss_03.png"></li>
          <li><img href="#" src="images/icon/icon_ss_01.png"></li>
          <li><img href="#" src="images/icon/icon_ss_04.png"></li>
          <li><img href="#" src="images/icon/icon_ss_05.png"></li>
        </ul>
      </div>
    </div>
  </div>
</div>

顺便说一句，我的页脚有两个不同的页脚，上页脚和下页脚，两个页脚都在一个名为“ .footer”的div内。

Answer 1

您需要在父div上添加一个position: relative;或添加到我所做的body标记中。然后将其放置在页面底部，因为body标签跨越了整个文档。

body {
  position: relative;
}

.lorem {
  line-height: 100px;
}

.footer {
background-color: red;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
color: white;

    .upper-footer, .lower-footer {
        padding: 10px 0 33px 0;
        margin: 0;
        width: 100%;
    }
    .upper-footer {
        background: #252525;
            .upper-footer-links {
                float: left;
                position: relative;
                margin: 3px -3px;
                    a {
                        text-decoration: none;
                        color: #ffffff;
                    }
                    .span {
                            position: inherit;
                            right: -1px;
                            color: #7b7b7b;
                        }
            }
    }
    .lower-footer {
        background: #3c3c3c;
        height: 74px;
            .footer-information {
                float: left;
                width: 458px;
                p {
                    line-height: 23px;
                    margin: 15px 0;
                    color: #9b9b9b;
                }

            }
            .footer-sns-links {
                float: right;
                padding: 28px 0;
                    ul {
                        list-style: none;
                        display: inline;

                            li {
                                display: inline-block;
                                border: 1px solid #686868;
                                padding: 8px;
                                &:hover {
                                    background-color: #373737;
                                }
                            }
                    }
            }
    }
}

<body>
<div class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing. Risus nec feugiat in fermentum posuere urna nec tincidunt. Eleifend mi in nulla posuere sollicitudin. Netus et malesuada fames ac turpis egestas maecenas pharetra convallis. Eget nunc scelerisque viverra mauris. Pretium aenean pharetra magna ac placerat vestibulum. Amet justo donec enim diam vulputate ut pharetra. Nisl tincidunt eget nullam non nisi est sit amet. Nunc lobortis mattis aliquam faucibus purus. Quisque egestas diam in arcu cursus euismod. Amet consectetur adipiscing elit ut aliquam purus sit amet luctus. Vestibulum mattis ullamcorper velit sed.

Diam vel quam elementum pulvinar etiam. In metus vulputate eu scelerisque felis imperdiet. Mi eget mauris pharetra et ultrices. Pretium lectus quam id leo in. Diam phasellus vestibulum lorem sed risus ultricies tristique. Maecenas volutpat blandit aliquam etiam erat. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Arcu cursus vitae congue mauris rhoncus. Malesuada nunc vel risus commodo. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Dignissim convallis aenean et tortor at. Faucibus in ornare quam viverra orci sagittis.

Vitae congue eu consequat ac. Id diam maecenas ultricies mi. Diam sollicitudin tempor id eu nisl nunc. In egestas erat imperdiet sed. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Dis parturient montes nascetur ridiculus mus mauris vitae. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar. A iaculis at erat pellentesque adipiscing commodo elit at. Egestas fringilla phasellus faucibus scelerisque eleifend. Quam adipiscing vitae proin sagittis. Urna porttitor rhoncus dolor purus. Quis blandit turpis cursus in hac habitasse platea. Curabitur gravida arcu ac tortor dignissim convallis aenean. Iaculis nunc sed augue lacus viverra.

Quis eleifend quam adipiscing vitae proin sagittis. Nibh tortor id aliquet lectus proin nibh. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Aliquam faucibus purus in massa tempor nec feugiat. Magna ac placerat vestibulum lectus. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Viverra maecenas accumsan lacus vel facilisis volutpat est. Ultrices vitae auctor eu augue ut lectus arcu bibendum. Sollicitudin tempor id eu nisl. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Id diam vel quam elementum pulvinar etiam non quam. Ultrices eros in cursus turpis. Pretium lectus quam id leo. Malesuada fames ac turpis egestas maecenas. Odio facilisis mauris sit amet massa vitae tortor. Amet porttitor eget dolor morbi non arcu risus.</div>
<div class="footer">
  
        <div class="upper-footer">
            <div class="wrapper">
                <div class="upper-footer-links">
                    <a href="#">개인정보처리방침</a>&nbsp; <span>|</span> &nbsp;
                    <a href="#">이메일무단수집거부</a>&nbsp; <span>|</span> &nbsp;
                    <a href="#">사이트맵</a>&nbsp; <span>|</span> &nbsp;
                    <a href="#">찾아오시는 길</a>
                </div>
            </div>
        </div>
        <div class="lower-footer">
            <div class="wrapper">
                <div class="footer-information">
                    <p class="footer-info">02841 서울특별시 성북구 안암로 145 크림슨창업지원단 &nbsp;|&nbsp; TEL : 02.3290.4810 &nbsp;|&nbsp; E-MAIL : startup@korea.ac.kr<br>COPYRIGHT(C)2018 KOREA UNIVERSITY. ALL RIGHTS RESERVED.</p>
                </div>
                <div class="footer-sns-links">
                        <ul>
                            <li><img href="#" src="images/icon/icon_ss_02.png"></li>
                            <li><img href="#" src="images/icon/icon_ss_03.png"></li>
                            <li><img href="#" src="images/icon/icon_ss_01.png"></li>
                            <li><img href="#" src="images/icon/icon_ss_04.png"></li>
                            <li><img href="#" src="images/icon/icon_ss_05.png"></li>
                        </ul>
                </div>
            </div>
        </div>
    </div>
 </body>

Answer 2

我认为您设置了页脚属性

position : fixed
left: 0;
bottom: 0;
width: 100%;

也许您的问题将得到解决。

Answer 3

如果您想在页面底部添加全角页脚，请尝试

{
position : absolute
left: 0;
right : 0;
bottom: 0;
}

并且您希望全角页脚沿着页面滑动

{
position : fixed
left: 0;
right : 0;
bottom: 0;
}

快乐编码

即使将页脚设置为绝对位置，页脚也不会粘在底部。

3 个答案: