0

I have this:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />

<style>
html, body {width:100%; height:100%; margin:0; border:0; padding:0;}

.tbl {
display: table;
border-collapse: collapse;
height: inherit;
width: 350px;
}
.tbl>* {
display: table-row;
}

#scrollable {
height: inherit;
width: inherit;
background-color: yellow;
}

#scroll-this {
height: inherit;
background-color: red;
overflow-y: auto;
}
</style>
</head>
<body>

<div class="tbl">
<div>top</div>
<div id="scrollable">
<div id="scroll-this">
<div>
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. 
</div>
<div>
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. 
</div>
<div>
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. 
</div>
</div>
</div>
<div>bottom</div>
</div>

</body>
</html>

Webkit (Chrome, Safari) views the html correctly: the 'scroll-this' is placed within a vertical scrollbar and the overall document does not exceed the viewport (which is 100%).

Firefox 12 views the html not as expected: the 'scroll-this' is NOT placed within a vertical scrollbar and the overall document exceeds the viewport - the overall document is placed within a vertical scrollbar instead of only putting 'scroll-this' into a scrollbar.

My question:

How can I tell Firefox to display the html-code the same as in Chrome? I do not want Firefox to extend the viewport.

nimo23
  • 5,170
  • 10
  • 46
  • 75
  • I tried `max-height:100%` on everything, but that didn't help. However, giving the `#scroll-this` a `display:table-cell` helped with the inconsistencies between the browsers: they all behaved like Firefox then. So I'm not sure what you want is possible using this table structure. – Mr Lister Mar 19 '12 at 18:44
  • I'm wondering at large why the table structure to begin with - there may be a reason; but I suspect the easier answer is to use a table to do table things, and use divs and such to not be tables. – Chris Carew Mar 19 '12 at 19:22
  • I changed the code above and added two "table-row"-divs to make it clear, why I need the display:table and display:table-row property. Replacing the above with a normal does not help. The result is the same. I am wondering why webkit views it correctly.
     – nimo23 Mar 19 '12 at 19:41
  • As far as I can tell, WebKit is just violating the spec here: you have percentage heights on elements with auto-height containing blocks, so they should be auto-height.... – Boris Zbarsky Mar 19 '12 at 19:56
  • But I have a table-row which is not auto-height, that is the table-row "scrollable" which height is set to inherit (=100%). Firefox does not keep the 100%-rule. Besides the sum of all table-rows within my table should not exceed 100%. But this is exactly what firefox did. – nimo23 Mar 19 '12 at 20:07

1 Answers1

0

Remove the display: table and display: table-row -- Unless those are part of a larger html scheme we are not aware of?

Chris Carew
  • 1,398
  • 10
  • 6
  • Same here. Using the one div by itself does the trick. Also in IE and Opera. – Mr Lister Mar 19 '12 at 18:37
  • I cannot remove "display: table" and "display:table-row". Doing so, will prevent the automatic calculation of heights within my table. if I have more "table-row"-divs within my "table"-div. For example, "
    .." puts a header within my table and webkit views it correctly (the viewport of 100% does not exceed.)
     – nimo23 Mar 19 '12 at 19:24
  • I have a feeling you're trying to do something that css/html isn't entirely designed to do. Any chance you could tell us the end goal? What are the calculated heights used for, a sticky footer? Generally, calculated heights as a whole in browsers behave, well, funny. – Chris Carew Mar 19 '12 at 19:39
  • view the above code in webkit and view it in firefox. You will see, what my goal is. I want that firefox views the code the same as webkit and not vice versa. It is not a common sticky footer. I do not calculate any height. A Table-layout is designed to stretch free space automatically. In my case it stretches vertically (100% height). However I do not want that firefox stretches my table over 100% - this is exactly what firefox unfortunately does. Webkit does it right: It does NOT stretch over 100%. – nimo23 Mar 19 '12 at 19:50
  • What I mean is, why add `display:table`, `display:table-row` to divs at all? Why not just use a `` tag? I am not sure that firefox is doing it 'wrong', per se, so much as this use is not the intended use of these display types, etc. I feel like if we knew what the end goal of using `display: table` and `display: table-row` was, we could suggest a more semantically correct and complete implementation.
     – Chris Carew Mar 19 '12 at 20:20
  • Replacing div-table with -tag does not help. The result is unfortunately the same. I have tried it before with
    -tag. The only reason why I use display:table is, that my divs are only for layouts and not for tabular data. (http://stackoverflow.com/questions/2617895/actual-table-vs-div-table). I can use
    -tag instead of div, but the end-result is the same.
     – nimo23 Mar 19 '12 at 20:35