7

I'm trying to use css property height 100% in order for a div taking all available space in the browser. I can make it work with Chrome and Firefox but not with IE8. Actually I understand that in IE8 height 100% means 100% of the size of the immediate parent unlike in Firefox or Chrome where it means 100% of the available space.

I came up with this sample http://jsfiddle.net/GdqjK/

html, body {
  margin: 0; padding: 0;
  bottom:0px;
  height:100%;
}

.grid {
  display : table;
  width:100%;
}

.tablerow {
  display : table-row;
}

.tablecell {
  display : table-cell;
}

.grow {
  bottom:0px;
  height:100%;
} 


<div class="grid grow"> 
    <div class="tablerow">
        <div class="tablecell">
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
        </div>
    </div> 

    <div class="tablerow grow">
        <div class="tablecell grow" style="border: solid 3px">
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
        </div>
    </div> 

</div>

You can see that running it with IE8 , the second row is much bigger. Is there any workaround without using fixed height? I would like to keep the same behavior of the div taking all the available space. If there is no solution to make it works with IE8 what would be the best degraded solution (maybe with conditional css for IE8). Thank you very much for your help.

user1852912
  • 75
  • 1
  • 5

2 Answers2

7

This one works for IE8+

http://jsfiddle.net/DNEb3/2/


<div class="grid"> 
    <div class="tablerow">
        <div class="tablecell" style="border: solid 3px">
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
        </div>
    </div> 

    <div class="tablerow grow">
        <div class="tablecell" style="border: solid 3px">
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
            a<br>
        </div>
    </div> 

</div> 

</body></html>​


html, body {
  margin: 0; padding: 0;
  bottom:0px;
  height:100%;
}

.grid {
  display : table;
  width:100%;
    height: 100%
}

.tablerow {
  display : table-row;
}

.tablecell {
  display : table-cell;
}
.grow {
  bottom:0px;
  height:100%;
}

​

kcsoft
  • 2,917
  • 19
  • 14
2

100% height can be accomplished using tables.

Just make sure that your <html> and <body> are both of 100% height as well.

Full working example:

<!doctype html>
<html style='height:100%;'>
<body style='margin:0; height:100%;'> <!-- margin:0 is optional -->

<table style='background:green; height:100%;'>
    <tr>
        <td>Content</td>
    </tr> 
</table>

</body>
</html>
Pacerier
  • 86,231
  • 106
  • 366
  • 634
  • 4
    The user is trying to get a DIV to be 100% height, definitely indicating he is trying to lay content out. Using an actual table for this is *very bad practice*. http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/ – Andrew Plummer Aug 06 '14 at 23:15
  • 4
    @AndrewPlummer, Don't just regurgitate, tell me **why** this is "very bad" here. The above answer provided by kcsoft looks more of a maintenance mess compared to this answer. Also, that answer is patently using a table layout too, even though it tries to hide its spots, being ashamed of what it actually is. – Pacerier Aug 07 '14 at 18:19
  • 5
    1. You are mixing structure and style. Is what you are laying out a table of data? "The HTML Table Element () represents data in two dimensions or more." - MDN Semantically, using a table for layout makes no sense at all. This is bad particularly accessibility and maintainability. However, you are also writing content to a specification, and people older and wiser than us explicitly state not to do this. See 11.1p 6 http://www.w3.org/TR/html401/struct/tables.html an Structure and Presentation: "http://www.w3.org/TR/html401/appendix/notes.html#notes-tables"
     – Andrew Plummer Aug 11 '14 at 00:13
  • 1
    To clarify my previous point, "Tables should not be used purely as a means to layout document content ... authors should use style sheets to control layout rather than tables." - W3C. 11 Tables - 11.1 Introduction to tables p6. The above answer (not yours) is the correct answer, and yours is patently incorrect. It is sad that you would rather artificially inflate your answer that promotes structure that makes the internet harder for disadvantaged people. Or at least, clarify why you know better than W3C, MDN, even dedicated wikipedia page http://en.wikipedia.org/wiki/Tableless_web_design – Andrew Plummer Aug 13 '14 at 02:14
  • @AndrewPlummer, Ok, I would dash out another reply since you requested for a clarification instead of yet another religious flame war. Leaving aside the appeals to authority, your arguments boil down to **3 points: 1) Accessibility:** I do not see the question asking for code to be optimized on PDAs and screen readers. In any case, do run the code here through Jaws reader, then run it again using the code from the other answer. Now tell me what's the difference you spotted? **2) Bandwidth savings:** this is an ......... – Pacerier Aug 13 '14 at 09:58
  • ..........invalid point here since the difference if any is negligible. If you insist on comparing, `
    ` is actually 27 characters less than `
    `. **3) Maintainability:** In this time and age, html generators are the norm. All it takes is a single function call change, and the style for the entire site can be changed. Maintaining html output by hand is a no-no ipso facto. Take a look at the source-code for google's homepage and tell me how many W3C recommendations were violated? .....
     – Pacerier Aug 13 '14 at 09:59
  • 1
    ..... **And lastly:** you stated that my answer is "patently incorrect". Trying to believe that we are all adults here, I tested my code again to see if it works. And it does work, so why do you say that this answer is "patently incorrect"? This answer does answer the question asked, thus I would not delete it despite the mass downvotes from your friends. (Btw, groupthink is a subtle yet dangerous thing, it's the very reason W3C refused to accept whatwg for a whole 2.5 yrs.) If I had indeed been mistaken and a flame war was actually the intended outcome, then do feel free to ignore my replies. – Pacerier Aug 13 '14 at 09:59
  • I'm pretty sure that @AndrewPlummer wasn't intending a Flame War. In terms of output, you are correct, it would appear the same visually as using the accepted answer of using CSS to style the elements as a table. However, when considering the point of HTML/CSS is to separate semantic structure from visual display, if the data isn't actually tabular data, you shouldn't be using a table to mark it up as one. More info can be found here: http://stackoverflow.com/questions/1760732/why-are-table-based-sites-bad-for-screen-reader-users – Damian Keeghan Aug 14 '14 at 01:40
  • This is not a flamewar, I was trying to teach you that your code was not very good and point that out in a comment and waited for a reply before i downvoted it, when I really could have just marked it as not an answer. You are apparently unaware that the question asked "in order for a *DIV* taking all available space in the browser" the imperative word being *DIV*. Your answer does *NOT* demonstrate a way to lay out a DIV to take up 100% height. As your answer does not demonstrate this, and there is no point trying to help you learn, I will mark it as not an answer. – Andrew Plummer Aug 14 '14 at 01:50
  • @dkeeghan, I have addressed that point under the heading "1) Accessibility..." found above. Also, you may be convinced that your friend wasn't intending a flame war, but his tone and accusations seem to suggest otherwise. – Pacerier Aug 14 '14 at 02:42
  • @AndrewPlummer, The question is how to fit content in 100% height with IE8. My answer demonstrates exactly that. Read between the lines if we wish to see the question. Nitpick the symbols used to express the question and we may never see beyond them. – Pacerier Aug 14 '14 at 02:43
  • @Pacerier The question is how to make a DIV 100% height, your answer does not solve the question, *which was already answered correctly 2 years prior*. The only thing your answer added to the correct question was a well understood bad practice (which you fail to understand, despite a direct contradiction in the W3C specification) that does not answer the question. – Andrew Plummer Aug 14 '14 at 03:57
  • @AndrewPlummer, **1)** The question is how to fit content in 100% height with IE8. Read between the lines if we wish to see the question. Nitpick the symbols used to express the question and we may never see beyond them, cf. [stackoverflow.com/questions/184...](http://goo.gl/pDZxZq). **2)** While it's true that the question already has an answer 2 years ago, do note that a question can have multiple answers. What I've done is adding another answer to the question. **3)** You stated that this is a bad practice because of 3 points: accessibility, bandwidth savings, and maintainability........... – Pacerier Aug 21 '14 at 17:42
  • @AndrewPlummer, .............So do read the comments above where I've already addressed those 3 points mentioned. **4)** While it's true that you are free to ignore the comments which I actually took time to type, I feel that it's pretty rude to continue commenting while at the same time ignoring what I've already typed previously. – Pacerier Aug 21 '14 at 17:43
  • You did not address any of those points, you said some random opinions about how you don't feel the web should always be accessible, you think you know how the frontpage of google is generated and you think tables are maintainable FED code, which they are not. You clearly have no interest in developing best practice FED code, or you think W3C MDN and a bunch of reputable sources I've tried to help you with do not understand best practice. – Andrew Plummer Aug 21 '14 at 23:47
  • @AndrewPlummer, **5)** Stop hand-waving and be explicit. You've raised exactly 3 issues and I've made exactly 3 refutations, one for each issue you've brought up. Exactly *which* of my three refutations above (found under the heading "1 accessibility", "2 bandwidth savings", "3 maintainability") did not address the point? **6)** You've also not answered the questions I've posed within the refutations above.............. – Pacerier Aug 30 '14 at 00:55
  • @AndrewPlummer, ..............Do read the questions and respond to them. Stop avoiding the questions. **7)** While it's true that you are free to ignore the comments which I actually took time to type, I feel that it's pretty rude to continue commenting while at the same time ignoring what I've already typed previously. – Pacerier Aug 30 '14 at 00:56
  • http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html Contains answers to all your issues, however they will likely be insufficient for you as you consider the HTML spec itself to be incorrect. Here is another answer, it's not smashing magazine (not good enough for you) or the W3C itself (also not good enough) but it does provide cartoons support. https://www.hotdesign.com/seybold/everything.html – Andrew Plummer Aug 30 '14 at 23:55