Question

我正在尝试创建一个页脚类，但它似乎位于我的.body-wrap类的底部，而不是实际的页面。

.body-wrap {
  height: 100%;
  padding-top: 3%;
  padding-left: 20%;
  padding-right: 20%;
}
.footer-wrap {
  border: 1px black solid;
  position: relative;
  z-index: 10;
  height: 3em;
  margin-top: -3em;
  text-align: center;
}

<div id="page-content-wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12">

        <div class="header-wrap">
          <a href="#menu-toggle" class="menu-toggle">
            <img class="hamburger-toggle" src="./img/menu.svg">
          </a>
          <img class="logo" src="./img/Spark.svg">
          <img class="text-logo" src="./img/Spark-grey-text.svg">
        </div>

        <div class="body-wrap">
          <h1>Hi Dave.</h1>
          <h2>Got an idea? Share it on Spark.</h2>
        </div>

        <div class="footer-wrap">
          <p>footer text.</p>
        </div>
      </div>
    </div>
  </div>
</div>

我也在使用自举侧边栏模板。在此处找到：http://startbootstrap.com/template-overviews/simple-sidebar/

帮助将不胜感激。

Answer 1

请尝试添加此代码：

.footer-wrap {
        border: 1px black solid;
        position: fixed;
        z-index: 10;
        height: 3em;
        margin-top: -3em;
        text-align: center;
        width: 100%;
        bottom: 0;
        left: 0;
    }

Answer 2

将position:fixed与bottom:0一起使用，它将在页面底部保持稳定

＆＃13;

.body-wrap {
  height: 100%;
  padding-top: 3%;
  padding-left: 20%;
  padding-right: 20%;
}
.footer-wrap {
  border: 1px black solid;
  position: fixed;
  bottom:0;
  z-index: 10;
  height: 3em;
  margin-top: -3em;
  text-align: center;
}

＆＃13;

<div id="page-content-wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12">

        <div class="header-wrap">
          <a href="#menu-toggle" class="menu-toggle">
            <img class="hamburger-toggle" src="./img/menu.svg">
          </a>
          <img class="logo" src="./img/Spark.svg">
          <img class="text-logo" src="./img/Spark-grey-text.svg">
        </div>

        <div class="body-wrap">
          <h1>Hi Dave.</h1>
          <h2>Got an idea? Share it on Spark.</h2>
        </div>

        <div class="footer-wrap">
          <p>footer text.</p>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 3

position: fixed上需要bottom: 0和footer-wrap。请查看以下更新！

＆＃13;

.body-wrap {
  height: 100%;
  padding-top: 3%;
  padding-left: 20%;
  padding-right: 20%;
}
.footer-wrap {
  border: 1px black solid;
  position: fixed;
  z-index: 10;
  height: 3em;
  margin-top: -3em;
  text-align: center;
  bottom: 0;
  left: 0;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="page-content-wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12">

        <div class="header-wrap">
          <a href="#menu-toggle" class="menu-toggle">
            <img class="hamburger-toggle" src="./img/menu.svg">
          </a>
          <img class="logo" src="./img/Spark.svg">
          <img class="text-logo" src="./img/Spark-grey-text.svg">
        </div>

        <div class="body-wrap">
          <h1>Hi Dave.</h1>
          <h2>Got an idea? Share it on Spark.</h2>
        </div>

        <div class="footer-wrap">
          <p>footer text.</p>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 4

.body-wrap {
  height: 100%;
  padding-top: 3%;
  padding-left: 20%;
  padding-right: 20%;
}
.footer-wrap {
  width:100%;
  border: 1px black solid;
  position: absolute;
  bottom:0px;
  z-index: 10;
  height: 3em;
  margin-top: -3em;
  text-align: center;
}

<div id="page-content-wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12">

        <div class="header-wrap">
          <a href="#menu-toggle" class="menu-toggle">
            <img class="hamburger-toggle" src="./img/menu.svg">
          </a>
          <img class="logo" src="./img/Spark.svg">
          <img class="text-logo" src="./img/Spark-grey-text.svg">
        </div>

        <div class="body-wrap">
          <h1>Hi Dave.</h1>
          <h2>Got an idea? Share it on Spark.</h2>
        </div>

        <div class="footer-wrap">
          <p>footer text.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 5

为.body-wrap和页脚宽度添加宽度和高度。更改页脚位置，如下面的代码所示。

.body-wrap {
  width:200px;
  height: 200px;
  padding-top: 3%;
  padding-left: 20%;
  padding-right: 20%;
  background:#111;
  color:#fff;
}
.footer-wrap {
  border: 1px black solid;
  z-index: 9;
  height: 3em;
  text-align: center;
  background:#f22;
  bottom:0;
  position:absolute;
  width:100%;
}

页脚不在页面底部

5 个答案: