Menu icon Foundation
Row height

I'm having trouble finding any sign of this problem on the web, so not sure if I've missed something really obvious.

I'm trying to get the bottom row in my grid setup to stretch to the bottom of the screen. I've seen various solution that use 100% and 100vh, but these are all base on one row so that works fine, as it's stretches from the top to the bottom - the full height of the viewport or body.

I would just like the the botom row and it's contents to stretch to the bottom of the viewport, but when I apply these techniques, they add lot's of extra height to the row (inherited from full length) and hence make the row stretch further than it's required. So it's either too far or not enough.

Please see picture to further clarify my infuriating problem!

Row fill view space

rowheightviewportstretch

I'm having trouble finding any sign of this problem on the web, so not sure if I've missed something really obvious.

I'm trying to get the bottom row in my grid setup to stretch to the bottom of the screen. I've seen various solution that use 100% and 100vh, but these are all base on one row so that works fine, as it's stretches from the top to the bottom - the full height of the viewport or body.

I would just like the the botom row and it's contents to stretch to the bottom of the viewport, but when I apply these techniques, they add lot's of extra height to the row (inherited from full length) and hence make the row stretch further than it's required. So it's either too far or not enough.

Please see picture to further clarify my infuriating problem!

Row fill view space

Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

Hey Marc!

No, .row1 and .row2 are not necessary, I just put it in my pen for illustrative purposes.

.row, will still be necessary for making rows however my script makes the element with .row3 take up the remaining space no matter what element is above it, whether it be a row, an img, a topbar, anything.

I don't believe html, body { height: auto; } will cause any problem, however I haven't done any comprehensive testing.

UPDATE: I've made a new class called docFill which should be applied to the element that needs to fill the remaining space in the document. .row3 is just for illustrative purposes. If Simon is still watching this thread and you are using my script please update it to the one in my Pen!

Another UPDATE: From very helpful feedback from Marc, please remember to put the script after jquery.js

Here is the script in all it's glory

function docFill(){
  if($(document).height() <= $(window).height()){$(".docFill").css("height",$(window).height()-$("body").height()+$(".docFill").height());
  }else{
    $(".docFill").css("height","auto");
  };
};
$(document).ready(docFill);
$(window).resize(docFill);

And here is a CodePen demo: http://codepen.io/winghouchan/pen/jJuhq

Raphael Durrer over 5 years ago

did you try it with height:100%, max-height:100%?

Robin Cox over 5 years ago

You can use jquery.

First of all set an unique id on each one of the rows. For instance one, two and three.

Then get the viewport height and put it in a variable.

var viewportHeight = $(window).height();

Then get the heights of rows one and two and put them in variables.

var oneHeight = $("#one").height();
var twoHeight = $("#two").height();

Now subtract oneHeight and twoHeight from viewportHeight and put the answer in a variable.

var threeHeight = viewportHeight - oneHeight - twoHeight;

Check that threeHeight is higher then the current hight of row three, if so set the height of row three to the value of threeHeight variable.

If (threeHeight > $("#three").height()) {
$("#three").css("height",threeHeight + "px");
}

Written on a mobile phone so there can be some typos.

Wing-Hou Chan over 5 years ago

Hey Simon!

Seems like Robin beat me to posting, I just had to be fiddling with some buttons that adds and removes text to show what happens if the document height is greater than the window height, but scrapped it in the end.

I made a CodePen demo with a similar JS solution for you here: http://codepen.io/winghouchan/pen/jJuhq

The concept is around the same but my if condition tests if the document height is less than or equal to the window height.

Vinay Raghu over 5 years ago

If you want a CSS only solution, I have a demo here
http://codepen.io/rvinay88/details/JvByc

The problem here though is, it adds a scroll and doesn't extend just up to the bottom of the screen. Hope this helps someone

Marc McGee over 5 years ago

Hi Wing-Hou

Implementing this might be tricky if the number of rows are optional. I have some pages I'm currently building that allow the user to insert optional areas, or not display other.

One trick I used to use was to set the body background color to whatever I wanted the footer area to be. Then wrap the main content region in a div that's set to 100% width & margin 0px auto, with a background color of either white or whatever color you want—so that it essentially covers up the body background color. All main contain is then structure within that div.

Wing-Hou Chan over 5 years ago

Hey Marc!

Thank you for the feedback! Yep, you are right about the inflexibility of my solution as it is dependent on manually getting the height of any elements above the last row. I think Robin is guilty of this as well.

I've updated my solution now so it is not dependent on manually getting the height of any elements above the last row! Check it out and post any feedback: http://codepen.io/winghouchan/pen/jJuhq

Marc McGee over 5 years ago

The script looks the same. Is the link pointing back to your first example in code pen?

Wing-Hou Chan over 5 years ago

Hey Marc!

The link is to the original Pen however I made changes to it.

Line 2 has changed from (something like) this:

if($(document).height() <= $(window).height()){$(".row3").css("height",$(window).height()-$(".row1").height()-$(".row2").height());

to this:

if($(document).height() <= $(window).height()){$(".row3").css("height",$(window).height()-$("body").height()+$(".row3").height());

Marc McGee over 5 years ago

My bad. Didn't look at it close enough. Giving his a test run now. Thanks.

Marc McGee over 5 years ago

Please pardon a novice question. Would I be correct in assuming that I can work only with the outer most rows in my configuring this? I have nested rows etc, but I'm guessing that the outer most row of each section is all that needs to be considered.

Wing-Hou Chan over 5 years ago

Hey Marc!

My script will make the last row fill the remaining space, no matter what element is above it - divs, imgs, everything and anything.

I just realized that the script can be applied to any element by just assigning row3 to it. :)

Marc McGee over 5 years ago

This is cool.

So are you saying that I don't need to worry about assigning classes (row1, row2, etc to all of the other rows?

Does adding height: auto to the html, body rule cause any potential issues with foundation overall?

Marc McGee over 5 years ago

Strike that. I think I understand. Any row can be made to be the one that expands by applying row3
So, I still need to apply row1 row2 and so on to all my other rows.

Question stil is though — Do I only need to apply the various row classes to the outer most rows?

Wing-Hou Chan over 5 years ago

Hey Marc!

No, .row1 and .row2 are not necessary, I just put it in my pen for illustrative purposes.

.row, will still be necessary for making rows however my script makes the element with .row3 take up the remaining space no matter what element is above it, whether it be a row, an img, a topbar, anything.

I don't believe html, body { height: auto; } will cause any problem, however I haven't done any comprehensive testing.

UPDATE: I've made a new class called docFill which should be applied to the element that needs to fill the remaining space in the document. .row3 is just for illustrative purposes. If Simon is still watching this thread and you are using my script please update it to the one in my Pen!

Another UPDATE: From very helpful feedback from Marc, please remember to put the script after jquery.js

Here is the script in all it's glory

function docFill(){
  if($(document).height() <= $(window).height()){$(".docFill").css("height",$(window).height()-$("body").height()+$(".docFill").height());
  }else{
    $(".docFill").css("height","auto");
  };
};
$(document).ready(docFill);
$(window).resize(docFill);

And here is a CodePen demo: http://codepen.io/winghouchan/pen/jJuhq

Marc McGee over 5 years ago

Hi Wing-hou Chan:

Thank you for posting. Sorry I didn't respond right away. I really wish this forum has email notification.
I get busy with other projects not related to web design.

I am very excited to give this another try.

Wing-Hou Chan over 5 years ago

Hey Marc!

No worries. Give it a try and I'm sure you'll love it!

PS Call me Wing!

Marc McGee over 5 years ago

Was having trouble... but got it to work! This is perfect.

Secret: I was putting the script near the closing body tag...but not far enough. Once I put it below the call for the jquery.js your script worked like a charm.

Also, the only class call I used was docFill. I did not set up any other css rules.

Thank you for posting the very helpful solution!

Marc McGee over 5 years ago

This is the coolest! Call me silly, but I just keep clicking back and forth through some of my site pages to see the bottom footer that nicely fills up the remainder of the screen.

Oh happy day!

Wing-Hou Chan over 5 years ago

Hey Marc!

Glad you are happy!

And it's good that you pointed out the placement of the script within your HTML file. I'll update my previous post with your feedback. My script depends on jQuery so that's why it didn't work when you placed it before jquery.js .

Yep the other classes (.row1, .row2, .row3) are not required for the script to function. They're just there to make the rows pretty and distinguishable.

Simon over 5 years ago

Ah! I was expecting an email like Marc! I'm going to play with this straight away when I get home tonight, looks like you guys have ironed all the issues out, which is amazing work!

Thanks for being so ridiculously helpful!