CODEWITHSUNDEEP
htmlcss
jtwalters
jtwalters

Reputation: 1134

How to put the footer div below the content?

I have this code here: http://jsfiddle.net/52yekaL9/

html, body {
  height: 100%;
}

.content {
  height: 100%;
}

.part {
  height: 100%;
  width: 100%;
}

.a { background-color: red; }
.b { background-color: green; }
.c { background-color: blue; }
.d { background-color: orange; }
<div class="content">
  <div class="part a">1</div>
  <div class="part b" style="height:150px;">2</div>
  <div class="part c">3</div>
</div>
<div class="footer d">
  this footer
</div>

The problem is in my div.footer d. I see that it is in this form: div.part b. I was testing and I see if I change the height of .content, the footer moves as well.

But I don´t think the correct way to change is: 200% + 150px

Is there another way to put the footer div after the content div?

Upvotes: 2

Views: 83

Answers (2)

Sudhakar Rao
Sudhakar Rao

Reputation: 175

Please try:

<div class="content">
  <div class="part a">1</div>
  <div class="part b" style="height:150px;">2</div>
  <div class="part c">3</div>
  <div class="footer d">
  this footer
</div>
</div>

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 371231

Instead of percentage heights (which are overly complicated and tricky), use viewport percentage units, which are simple, stable and reliable:

.content {
  min-height: 100vh;
}

.part {
  height: 100vh;
}

.a { background-color: red; }
.b { background-color: green; } 
.c { background-color: blue; }
.d { background-color: orange; }
<div class="content">
  <div class="part a">1</div>
  <div class="part b" style="height:150px;">2</div>
  <div class="part c">3</div>
</div>
<div class="footer d">this footer</div>

jsFiddle

Upvotes: 2

Related Questions