the height of a td
in [CSS]
|
Prev: instructor solution manual for Introduction to Quantum Mechanics 1st edition (1995) by David J. Griffiths
Next: Inline List and No Wrap problem
From: Jeff Thies on 5 Apr 2010 21:52 I want to do this: ..all_red{ background-color: red; height: 100%; } <td><div class="all_red"></div></td> <td>content<br>that<br>gives<br>the row<br>height</td> What I find is that .all_red has no height (0, not the actual height of the cell), if I give the cell a fixed height, like this: td{ height: 100px; } then .all_red is 100% of 100px. I find that curious. Does 100% only apply to explicitly set heights? Jeff
From: dorayme on 5 Apr 2010 23:45 In article <hpe45i$pa3$1(a)news.albasani.net>, Jeff Thies <jeff_thies(a)att.net> wrote: > I want to do this: > > .all_red{ > background-color: red; > height: 100%; > } > > <td><div class="all_red"></div></td> > <td>content<br>that<br>gives<br>the row<br>height</td> > > What I find is that .all_red has no height (0, not the actual height > of the cell), if I give the cell a fixed height, like this: > > td{ > height: 100px; > } > > then .all_red is 100% of 100px. > > I find that curious. Does 100% only apply to explicitly set heights? > Not really. The height of a cell or many other elements can simply be generated by the content. But if you do specify a height, then in many circumstances if not all, it will be in relation to this height. The main thing to note is that % height is in relation to the actual height of the containing element, in this case a cell that is (under some circumstances at least) 100px high - no matter how this parent got its height. You have cells that are *at least* 100px high. They will be higher if the content cannot fit in 100px but they will still be 100px if the content can *easily* fit in, room to spare is provided. In other words the height you specify is regarded as a minimum, not maximum height. That is how tables work it seems. That's the first point. Second, you specify that an element of class "all_red" should be 100%. Well, forgetting about borders, paddings and margins, that will get you a div that is top to bottom in its containing block. In this case the block is the cell. There is nothing but a div with nothing in this div in the cell. But it still has 100% height of the cell which is 100px. It is just that you cannot see the div without giving it a width and some background colour or content. Table cells are generally shrink to fit and so, since the div has no width, the cell will shrink by default to squeeze the bit of nothing as hard as it can, widthwise that is. The div is there in a sort of potential space, I won't say metaphysical because this frightens folks and makes them angry. I have HTML and CSS cameras that can illustrate all this stuff for you if you need it. -- dorayme
From: Jeff Thies on 6 Apr 2010 00:40 dorayme wrote: > In article <hpe45i$pa3$1(a)news.albasani.net>, > Jeff Thies <jeff_thies(a)att.net> wrote: > >> I want to do this: >> >> .all_red{ >> background-color: red; >> height: 100%; >> } >> >> <td><div class="all_red"></div></td> >> <td>content<br>that<br>gives<br>the row<br>height</td> >> >> What I find is that .all_red has no height (0, not the actual height >> of the cell), if I give the cell a fixed height, like this: >> >> td{ >> height: 100px; >> } >> >> then .all_red is 100% of 100px. >> >> I find that curious. Does 100% only apply to explicitly set heights? >> > > Not really. The height of a cell or many other elements can > simply be generated by the content. But if you do specify a > height, then in many circumstances if not all, it will be in > relation to this height. The main thing to note is that % height > is in relation to the actual height of the containing element, in > this case a cell that is (under some circumstances at least) > 100px high - no matter how this parent got its height. > > You have cells that are *at least* 100px high. They will be > higher if the content cannot fit in 100px but they will still be > 100px if the content can *easily* fit in, room to spare is > provided. In other words the height you specify is regarded as a > minimum, not maximum height. That is how tables work it seems. > That's the first point. > > Second, you specify that an element of class "all_red" should be > 100%. Well, forgetting about borders, paddings and margins, that > will get you a div that is top to bottom in its containing block. > In this case the block is the cell. > > There is nothing but a div with nothing in this div in the cell. > But it still has 100% height of the cell which is 100px. It is > just that you cannot see the div without giving it a width and > some background colour or content. > > Table cells are generally shrink to fit and so, since the div has > no width, the cell will shrink by default to squeeze the bit of > nothing as hard as it can, widthwise that is. Let's give the cell some width, the div still has no height if you set it for 100%. It would if you set it explicitly in either ems or px, but not %. However explicitly setting the cell height, not just allowing it to have the height of the row, gives a div that actually is 100% high. Try it. What brought all this about is that I have a large table with guest book entries in it. In the preceding cell I have an ajax toggle, I'm just getting around having a lot of checkboxes that would have to be checked and then updated. I thought I would replace the checkbox with a div that would change color from red to green (and set the state of guest book entry via ajax to OK). Since the entries are varying in height, I wanted the toggle div to also be the same height as the adjoining cell. Larger, easier to hit target. Set up issues keep from just setting the cell background color. I think it'll be a useful widget. I'd post an example but it's under a password (Funeral Home). Jeff The div is there in > a sort of potential space, I won't say metaphysical because this > frightens folks and makes them angry. > > I have HTML and CSS cameras that can illustrate all this stuff > for you if you need it. >
From: dorayme on 6 Apr 2010 01:54 In article <hpedvh$67a$1(a)news.albasani.net>, Jeff Thies <jeff_thies(a)att.net> wrote: > dorayme wrote: > > In article <hpe45i$pa3$1(a)news.albasani.net>, > > Jeff Thies <jeff_thies(a)att.net> wrote: > > > >> I want to do this: > >> > >> .all_red{ > >> background-color: red; > >> height: 100%; > >> } > >> > >> <td><div class="all_red"></div></td> > >> <td>content<br>that<br>gives<br>the row<br>height</td> > >> > >> What I find is that .all_red has no height (0, not the actual height > >> of the cell), if I give the cell a fixed height, like this: > >> > >> td{ > >> height: 100px; > >> } > >> > >> then .all_red is 100% of 100px. > >> > >> I find that curious. Does 100% only apply to explicitly set heights? > >> > > > > Not really. The height of a cell or many other elements can > > simply be generated by the content. But if you do specify a > > height, then in many circumstances if not all, it will be in > > relation to this height. The main thing to note is that % height > > is in relation to the actual height of the containing element, in > > this case a cell that is (under some circumstances at least) > > 100px high - no matter how this parent got its height. > > > > You have cells that are *at least* 100px high. They will be > > higher if the content cannot fit in 100px but they will still be > > 100px if the content can *easily* fit in, room to spare is > > provided. In other words the height you specify is regarded as a > > minimum, not maximum height. That is how tables work it seems. > > That's the first point. > > > > Second, you specify that an element of class "all_red" should be > > 100%. Well, forgetting about borders, paddings and margins, that > > will get you a div that is top to bottom in its containing block. > > In this case the block is the cell. > > > > There is nothing but a div with nothing in this div in the cell. > > But it still has 100% height of the cell which is 100px. It is > > just that you cannot see the div without giving it a width and > > some background colour or content. > > > > Table cells are generally shrink to fit and so, since the div has > > no width, the cell will shrink by default to squeeze the bit of > > nothing as hard as it can, widthwise that is. > > Let's give the cell some width, the div still has no height if you set > it for 100%. It would if you set it explicitly in either ems or px, but > not %. > > However explicitly setting the cell height, not just allowing it to have > the height of the row, gives a div that actually is 100% high. > > Try it. I have and it goes from the top of the cell to the bottom of the cell and since the div is default auto width, it fills the width of the cell too. At least in a good modern browser it does. If you have to do special things for not so good browsers, that is a another matter and since you mention nothing about particular browsers and give no URL what can I say? What is the least thing I said that is demonstrably false please so I can learn from my mistakes. Please demo the mistakes so I can actually see it or them. I am very young by my planet's standards and am still learning. -- dorayme
From: Ben C on 6 Apr 2010 03:27
On 2010-04-06, Jeff Thies <jeff_thies(a)att.net> wrote: > I want to do this: > > .all_red{ > background-color: red; > height: 100%; > } > ><td><div class="all_red"></div></td> ><td>content<br>that<br>gives<br>the row<br>height</td> > > What I find is that .all_red has no height (0, not the actual height > of the cell), if I give the cell a fixed height, like this: > > td{ > height: 100px; > } > > then .all_red is 100% of 100px. > > I find that curious. Does 100% only apply to explicitly set heights? Pretty much, yes. Percentages only make sense if it's clear what they're supposed to a percentage _of_. So this works for example: <div style="height: 200px"> <div style="height: 50%"> <div style="height: 50%"> ... The innermost div should be 50px high-- 50% of 50% of 200px. If you leave height as "auto" then it gets a height that depends on its contents. It's therefore circular if its contents try to be some percentage of that height, which they themselves determine, so those get ignored (except in tables sometimes in quirks mode but don't go there). The only exception to this is absolutely postioned elements. They don't affect the heights of their containers, so they can be percentages of those heights (the heights are determined by the other, "normal-flow" descendents). e.g. this should work: <div style="position: relative; height: auto"> text, other stuff, blah blah <div style="position: absolute; height: 50%"> </div> </div> |