Doesn't work. I believe this may be because the outer div doesn't have a set height and for some reason the smaller box and it's 100% height has nothing to work on. I cannot give it a set height however because that would defeat the point.

So unless there is a another way, I guess I am asking: How can I set a child element's height to that of it's parent?

10 Answers
10

This is getting ridiculous. User wants to see a table. HTML language provides a table element to achieve exactly the goal user wants. Yet, we use a whole library (I an looking at JQuery answer) to achieve the goal w/o a table even though it means a script running on client!

jQuery is a pretty lightweight library all things considered and with connection speeds getting faster and faster, it's pretty much a non-issue for most users. Tables are the easiest answer, but not always the best one. For displaying data in fashion similar to a spreadsheet, then tables are by far the way to go, but for a laying out what I'm sure Damien hopes to be a clean, semantic website, it's not the ideal solution.
–
AndrewJul 23 '09 at 15:15

9

The problem is not in the size but in the act of scripting. You solve a static layout problem by dynamic way of the scipt. On slow computer, you can see your layout change as script executes. If a user has switched Javascript off, it gets wrong layout. One should try separate HTML(content) from CSS (layout) from Javascript (action) and not solve problems of one with another.
–
buti-oxaJul 23 '09 at 15:32

As with anything else, it comes down to client or personal preference. I believe very much in separation of content and layout, but what it really comes down to is your audience. For personal projects, I'll assume a few things about my target audience (Flash support, Javascript on, high speed connections, modern browsers) and I'll develop accordingly. Analytics data usually confirms my assumptions on all these points. In the end, if no easy (or semantically valid) answer is available within HTML/CSS, than I see no point in using a bit of JS to make up for these shortcomings.
–
AndrewJul 28 '09 at 19:32

1

I made this the answer because it is what I did. Tables are horrible for layout but all the over solutions also had problems. I concluded that there is no sensible way to do this with CSS without hacks, a lot of which do not work in same cases (such as boxes with borders all around).
–
DamienAug 4 '09 at 16:03

2

Tables aren't achieving the OP's goal, if it's tabular data use a table, if you're using a table to solve a layout problem, you're not doing it right.
–
NikApr 22 '13 at 4:44

While I agree with your tables comment, that solution is essentially committing the same sin of un-semantic markup. Using a table for something that isn't really a table (doesn't necessarily have to be strictly data) is committing the same sin because the content is not supposed to be a table. Multiple un-semantic divs which are made purely to make background color faux columns is just as bad on that front, IMO. If you have those wrappers already, for semantic reasons (page > content > section > article etc), then I guess it would work.
–
kmiyashiroAug 7 '09 at 14:38

Late to the party, but here's my swing at equal columns (similar to the linked article) using :before psuedo-selectors. Not terribly useful, but someone may find it "interesting" (or bad... thought provoking at least?)
–
thirdenderJul 31 '12 at 7:33

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.
–
deppermJul 15 at 18:17