CODEWITHSUNDEEP
htmlcss
Eze Kohon
Eze Kohon

Reputation: 325

How can I make a sticky footer in just one of two columns?

I have two bootstrap columns, and I need to implement a footer in just one of them.

I have it implemented here:

.row {
  background: #f8f9fa;
}
.container {
  
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
  
}
.footer {
  bottom: 0;
  height: 40px;
  line-height: 40px;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row h-100">
    <div class="col col-3">
      1 of 2
    </div>
    <div class="col-9">
      <div class="row">
        <div class="col col-8">2 of 2</div>
        <div class="col col-4">2 of 2</div>
      </div>
      <div class="row">
        <footer class="position-fixed border w-100 footer">STICKY FOOTER</footer>
      </div>
    </div>
  </div>
</div>

But the problem is that the position: fixed makes the footer out of the flow of the container, and it takes the complete width of the page. Is there a way to make the footer end where the column ends?

Or is there a better way to do this with flexbox?

Thanks!

Upvotes: 1

Views: 50

Answers (1)

SirPilan
SirPilan

Reputation: 4847

.main {
  height: 200vh;
}
.col {
  background-color: #CCC;
  height: 40px;
  line-height: 40px;
}
.black-border {
  border: 1px solid black;
  border-width: 1px 0px 1px 1px;
}
.black-border:last-child {
  border-width: 1px;
}
.footer {
  bottom: 0;
  height: 40px;
  line-height: 40px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container main">
  <div class="row h-100">
    <div class="col col-3 black-border">
      1 of 2
    </div>
    <div class="col col-9">
      <div class="row">
        <div class="col col-8 black-border">2 of 2</div>
        <div class="col col-4 black-border">2 of 2</div>
      </div>
    </div>
  </div>
</div>

<footer class="position-fixed w-100 footer">
  <div class="container">
    <div class="row justify-content-end">
      <div class="col col-9 black-border">
        <div class="w-100">STICKY FOOTER</div>
      </div>
    </div>
  </div>
</footer>

Upvotes: 2

Related Questions