2

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?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
jtwalters
  • 1,024
  • 7
  • 25

2 Answers2

2

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

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Is this better in the screen percert cases use the viewport percentage units? – jtwalters Feb 18 '17 at 00:32
  • @jtwalters, I'm sorry I don't understand the question. – Michael Benjamin Feb 18 '17 at 00:34
  • 1
    @Michael_B I think he's asking if using viewport is better when you set width and height as percentages. –  Feb 18 '17 at 00:36
  • 1
    Thanks, @SittingBull. Generally speaking, use *percentages* when you want to size an element relative to the parent. You normally need to define a height on the parent for this to work (there are exceptions). – Michael Benjamin Feb 18 '17 at 00:39
  • @Michael_B, In cases of my reference is the screen like the problem or maybe: "I need a width of div in 30% of screen" is better use `width: 30vw;` than `width: 30%;`? – jtwalters Feb 18 '17 at 00:39
  • 1
    Use *viewport percentages* when you are able to size elements relative to the *initial containing block* (i.e., the viewport). Since you were trying to set your elements to `height: 100%`, using `height: 100vh` was an easy and simple alternative. – Michael Benjamin Feb 18 '17 at 00:40
0

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>
Sudhakar Rao
  • 177
  • 1
  • 8
  • You're putting the footer inside 'content' and he does not want the footer to be manipulated when he manipulates content. –  Feb 18 '17 at 00:30