Question

嗨，我已经创建了一个angularJs partial。这是一种形式。然而，“下一个”按钮所在的黑色底部位（形式包装页脚）将不会到达底部/停留在页面底部。它留下了一个尴尬的差距。我想要它反映顶部。正如您在图像附件中看到的那样。 here's the image

我花了好几个小时摆弄，我无法让它走到尽头。非常感谢任何帮助。

如果我使用：

 position:absolute;
    bottom: 0;

它有效，但它使得底部div超出了右边的范围。

new image

.form-wrapperTitle {
  width: 100%;
  height: 15%;
  padding-top: 13px;
  padding-bottom: 13px;
  font-size: 14px;
  text-align: center;
  color: #bfbfbf;
  font-weight: bold;
  background: #121212;
  border: #2d2d2d solid 1px;
  margin-bottom: 30px;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  font-family: Arial;
}
.form-wrapper {
  width: 80%;
  height: 60%;
  margin: 50px auto;
  overflow: hidden;
  background: #1e1e1e;
  border-radius: 6px;
  box-shadow: 0px 0px 50px rgba(0, 0, 0, .8);
  color: #bfbfbf;
}
.form-wrapperFooter {
  width: 100%;
  height: 15%;
  font-size: 14px;
  text-align: center;
  color: #bfbfbf;
  font-weight: bold;
  background: #121212;
  border: #2d2d2d solid 1px;
  /* margin-bottom: 30px;*/
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  font-family: Arial;
  padding-top: 13px;
  padding-bottom: 13px;
}

<section class="form-wrapper">
  <div class="form-wrapperTitle">Name Your Goal</div>


  <br>Here's where it all starts. Saving into your investments with Clear Finance is all about goals.
  <br>Everyone saves for something - even if you're not quite sure what it is yet.
  <br>

  <br>
  <form class="form-horizontal" role="form">
    <div class=" form-group">
      <div class="col-sm-6">
        <div class="form-group">
          <label class="col-sm-4 control-label">Form Goal</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" ng-model="formGoal" placeholder="What is your goal?">
            <br>
            <strong>Your Goal is:</strong>
            <h5>{{formGoal}}</h5>
  </form>
  </div>
  </div>
  </div>
  </div>
  </div>

  <div class="form-wrapperFooter">
    <button class="btn btn-primary" ng-click="goToNextState('form.goalamount')">Next</button>
</section>
</div>

Answer 1

这可以帮到你：

  .form-wrapperFooter{
    position:absolute;
    bottom:0px;

    }

如果您页面上的内容非常少，并且不会影响整个页面的高度，那么这将对您有用。

Answer 2

尝试以下代码：

对齐页面底部 - 将position: relative;添加到.form-wrapperFooter的包装中。

.form-wrapperFooter{
  position:absolute;
  bottom:0px;
}

对齐浏览器底部

.form-wrapperFooter{
  position: fixed;
  bottom: 0;
}

Answer 3

position: absolute;
bottom: 0;

工作......但是Div超越了右边。

因此我将百分比从100％更改为80％

考虑到我希望div能够填充100％的内部div，这很奇怪。将其改为80％似乎已经纠正了它。不知道它是如何工作的。感谢您的投入。

Answer 4

你 差不多 ，但是你错过了puuzzle的重要部分：

绝对位置元素相对于第一个元素定位位置不是静态的父元素。如果没有这样的话找到元素，包含块为<html>

让您的父母 relative ，以及您的孩子绝对（就定位而言）。

所以你的表单包装类应该包含：

position: relative;
padding-bottom:30px;

并且您的form-wrapperFooter应该包括：

position:absolute;
bottom:0;

我还更正了你的标记，以便在浏览器兼容性方面正确呈现。

你可能想要玩这些值，但我认为这是它的一般要点：

请参阅下面的工作演示：

＆＃13;

.form-wrapperTitle {
  width: 100%;
  height: 15%;
  padding-top: 13px;
  padding-bottom: 13px;
  font-size: 14px;
  text-align: center;
  color: #bfbfbf;
  font-weight: bold;
  background: #121212;
  border: #2d2d2d solid 1px;
  margin-bottom: 30px;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  font-family: Arial;
}
.form-wrapper {
  width: 80%;
  height: 65%;
  margin: 50px auto;
  overflow: hidden;
  background: #1e1e1e;
  border-radius: 6px;
  box-shadow: 0px 0px 50px rgba(0, 0, 0, .8);
  color: #bfbfbf;
  padding-bottom:30px;
  position:relative;
}
.form-wrapperFooter {
  width: 100%;
  height: 5%;
  font-size: 14px;
  text-align: center;
  color: #bfbfbf;
  font-weight: bold;
  background: #121212;
  border: #2d2d2d solid 1px;
  /* margin-bottom: 30px;*/
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  font-family: Arial;
  padding-top: 13px;
  padding-bottom: 13px;
  position:absolute;
  bottom:0;  
}

＆＃13;

<section class="form-wrapper">
  <div class="form-wrapperTitle">Name Your Goal</div>


  <br>Here's where it all starts. Saving into your investments with Clear Finance is all about goals.
  <br>Everyone saves for something - even if you're not quite sure what it is yet.
  <br>

  <br>
  <form class="form-horizontal" role="form">
    <div class=" form-group">
      <div class="col-sm-6">
        <div class="form-group">
          <label class="col-sm-4 control-label">Form Goal</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" ng-model="formGoal" placeholder="What is your goal?">
            <br>
            <strong>Your Goal is:</strong>
            <h5>{{formGoal}}</h5>

          </div>
        </div>
      </div>
    </div>
  </form>

  <div class="form-wrapperFooter">
    <button class="btn btn-primary" ng-click="goToNextState('form.goalamount')">Next</button>
  </div>
</section>

＆＃13;

Div页脚不会停留在底部

4 个答案: