Question

这是我的CSS代码

footer {
    position: relative;
    height: 50px;
    width: 100%;
    background-color: white;
}
p.copyright {  
    position:absolute;
    width:100%;
    line-height:40px;
    color:red;
    vertical-align:bottom;
    text-align:center;
    bottom:0;
}

这是我的aspx HTML代码

<footer>
   <p class="copyright">
  Copyright 2017 Anime Toys</p>
    </footer>

我试图将页脚保持在所有网页的底部。我面临的问题是，某些网页包含少量内容，页脚有时会位于页面的中间位置，而下方会留下空白区域。

如何解决此问题？有人可以修复我的代码吗？

Answer 1

您可以使用包含position: relative;的容器元素和包含position: absolute;和bottom: 0;的页脚来执行此操作。诀窍是给容器一个min-height: 100vh;以确保，页脚至少位于页面的底部，即使之前的内容小于视口高度。

＆＃13;

body {
  margin: 0;
}

.container {
  position: relative;
  min-height: 100vh;
}

footer {
  position: absolute;
  bottom: 0;
  height: 60px;
  width: 100%;
}

p.copyright {
  line-height: 40px;
  color: red;
  text-align: center;
}

＆＃13;

<div class="container">
  some text
  <footer>
    <p class="copyright">Copyright 2017 Anime Toys</p>
  </footer>
</div>

＆＃13;

Answer 2

注意：确保＆＃39; padding-bottom＆＃39;的值on #content等于或大于#footer的高度。

root

Answer 3

将您的内容放入html5部分和一个带有逻辑类的外部容器，例如＆＃34; wrapper＆＃34;并设置以下CSS。请从snipit查看整页以查看它的实际效果！

干杯

＆＃13;

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
    
    .wrapper {
        min-height: 100%;
        position: relative;
    }
    header{
        background-color: #dcdcdc;
        height: 100px;
        width: 100%;
    }
    footer {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 50px;
        width: 100%;
        background-color: white;
    }
    
    p.copyright {
        width: 100%;
        padding: 10px 0px;
        color: red;
        text-align: center;
        background-color: #f1f1f1;
    }

＆＃13;

<!doctype html>
</head>
</head>

<body>
    <section class="wrapper">
        <header>

        </header>
        <section class="content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
                to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
                typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
                including versions of Lorem Ipsum.
            </p>
        </section>
        <footer>
            <p class="copyright">
                Copyright 2017 Anime Toys</p>
        </footer>
    </section>
</body>

</html>

＆＃13;

如何在页面底部保留页脚？

3 个答案: