Question

当我添加更多文本内容时，灰色div仍位于屏幕中间。我已经尝试过绝对位置，但它不起作用..我希望它始终位于页面的底部（在页脚之前但不是固定的）。如果有很多文本内容我想看到它只在文本末尾滚动。

有什么想法吗？

提前谢谢！

* {
  margin: 0;
}
html, body {
height: 100%;
}
body {
min-height: 100%;
}
header {
  background: orange;
  height: 60px;
  position:fixed;
  width: 100%;
  top: 0px;
  z-index:1;
}
.contenido {
    position:relative;
    height: 100%;
}
p {
    padding-bottom: 50px;
    padding-top: 90px;
}
.btn-1 {
    background: gray;
    position: absolute;
    bottom: 50px;
    width: 100%;
    height: 50px;
}
.site-footer {
  background: orange;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 50px;
}

<!DOCTYPE HTML>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <LINK REL=StyleSheet HREF="estilo.css" TYPE="text/css" MEDIA=screen>
   </head>
   <body>
      <header>
       
      </header>
      <div class="contenido">
         
         <p>Es ene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemEs un hecho establecido hace demasiado tiempo que un lector se Es ene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemEs un hecho establecido hace demasiado tiempo que un lector se Es ene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemEs un hecho establecido hace demasiado tiempo que un lector se Es ene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemEs un hecho establecido hace demasiado tiempo que un lector se Es ene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemEs un hecho establecido hace demasiado tiempo que un lector se Es ene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemEs un hecho establecido hace demasiado tiempo que un lector se </p>
         <div class="btn-1">Next page</div>
      </div>
      <footer class="site-footer">
        All Rights Reserved
      </footer>
   </body>
</html>

Answer 1

试试这个：

.btn-1 {
    background: gray;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: auto;
    margin-bottom: 50px;
}

这将使你的灰色div＆＃34;自动尺寸＆＃34; （高度）。 Demo

如何将div推到容器的底部？

1 个答案: