CODEWITHSUNDEEP
htmlcss
Superunknown
Superunknown

Reputation: 501

Div footer won't stay at bottom

Hi I've created an angularJs partial. It's a form. However the black bottom bit(form wrapper footer) where the 'next' button is won't go to the bottom/stay at the bottom of the page. It leaves an awkward gap. I want it to mirror the top. As you can see in the image attachment. here's the image

I've spent hours fiddling around and I can't get it to go to the bottom. Any help would be greatly appreciated thanks.

If I use :

 position:absolute;
    bottom: 0;

It works but it makes the bottom div go beyond the scope to the right.

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>

Upvotes: 1

Views: 482

Answers (4)

jbutler483
jbutler483

Reputation: 24549

You were almost there, But you missed a vital piece of the puuzzle:

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>

Make your parent relative, and your child Absolute (in terms of positioning).

so your form-wrapper class should include:

position: relative;
padding-bottom:30px;

and your form-wrapperFooter should include:

position:absolute;
bottom:0;

I have also corrected your markup in order for it to be correctly rendered in terms of browser compatibility.

You may want to play with the values, but I think this is the general jist of it:

See below for a working demo:

.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;  
}
<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>

Upvotes: 0

Superunknown
Superunknown

Reputation: 501

The 

position: absolute;
bottom: 0;

worked...but the Div went beyond to the right.

so I changed the percentage from 100% to 80%

This is odd considering I wanted the div to fill 100% of the inside div. Changing it to 80% seems to have corrected it. No idea how it worked. Thanks for the input.

Upvotes: 0

shanidkv
shanidkv

Reputation: 1103

Try below code:

Align bottom of the page - Add position: relative; to wrapper of the .form-wrapperFooter. 

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

Align bottom of the browser

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

Upvotes: 0

Tarang
Tarang

Reputation: 318

This can help you:

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

    }

This will work for you if you have very less content on you page that does not take up the height of the whole page.

Upvotes: 1

Related Questions