Question

我正在寻找没有position: absolute; bottom: 0或position: fixed的示例。

下面是我的布局示例。

我想将页脚放在页面底部，如果没有足够的内容将其推下来，那么我正在寻找以某种方式将页脚推到底部的min-height。

＆＃13;

.application-layout__container {
  margin: 0 auto;
  padding: 0 15px;
}

.button__left {
  float: left;
}

.button__right {
  float: right;
}

.application-layout__button-group {
  clear: both;
}

.page-footer {
  background-color: #0065bd;
  color: #fff;
  margin-top: 42px;
}

.page-footer nav {
  font-weight: bold;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 21px 0;
}

.page-footer nav a {
  color: #fff;
}


}

＆＃13;

<html>

  <body>
    <div>
      <div class="application-layout__container">
        <div class="application-layout__header">
          <h1>
        Application
      </h1>
        </div>
        <div class="application-layout__body">
          <form>
            <div class="form-group">
              <label for="input">Input</label>
              <input id="input" type="text" />
            </div>
          </form>
        </div>
        <div class="application-layout__button-group">
          <div class="button__left">
            <button type="button">
              Back
            </button>
          </div>
          <div class="button__right">
            <button type="button">
              Next
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="page-footer">
      <nav>
        <a href="one">one</a>
        <a href="two">two</a>
        <a href="three">three</a>
        <a href="four">four</a>
      </nav>
    </div>
  </body>

</html>

＆＃13;

Answer 1

我看不出使用position: absolute和bottom: 0的问题是什么。

.application-layout__container {
  margin: 0 auto;
  padding: 0 15px;
}

.button__left {
  float: left;
}

.button__right {
  float: right;
}

.application-layout__button-group {
  clear: both;
}

.page-footer {
position: absolute;
bottom: 0;
width: 100%;
  background-color: #0065bd;
  color: #fff;
  margin-top: 42px;
}

.page-footer nav {
  font-weight: bold;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 21px 0;
}

.page-footer nav a {
  color: #fff;
}


}

<html>

  <body>
    <div>
      <div class="application-layout__container">
        <div class="application-layout__header">
          <h1>
        Application
      </h1>
        </div>
        <div class="application-layout__body">
          <form>
            <div class="form-group">
              <label for="input">Input</label>
              <input id="input" type="text" />
            </div>
          </form>
        </div>
        <div class="application-layout__button-group">
          <div class="button__left">
            <button type="button">
              Back
            </button>
          </div>
          <div class="button__right">
            <button type="button">
              Next
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="page-footer">
      <nav>
        <a href="one">one</a>
        <a href="two">two</a>
        <a href="three">three</a>
        <a href="four">four</a>
      </nav>
    </div>
  </body>

</html>

将页脚推到页面底部，除非有内容在没有固定高度的情况下将其向下推

1 个答案: