|
I recently came across something similar but with divs rather than tables but I think the same applies.
What you need to do, is explicitly specify that the body (the document body) has 100% height, and if there are in containers within, they also must have relative 100%.
Here's an example:
<html>
<head></head>
<body style="height:100%;">
<div style="height:100%;"
<table style="height:100%;">
</table>
</div>
</body>
keep in mind, what I meant by relative 100% is as so:
<html>
<head></head>
<body style="height:100%;">
<div style="height:50%;">
</div>
<div style="height:50%;"
<table style="height:100%;">
</table>
</div>
</body>
If the post was helpful, please vote, eh!
Current activities:
Book: Devils by Fyodor Dostoyevsky
Project: Hospital Automation, final stage
Learning: Image analysis, LINQ
Now and forever, defiant to the end.
What is Multiple Sclerosis[ ^]?
-- Modified Thursday, July 22, 2010 2:49 PM
|
|
|
|
|
Mustafa,
Thanks for the advice. Although this is not exactly what I am looking for... it appears to be the only way to get a table row to consume the remaining window space with style sheets.
It is unfortunate that I need to use ALL relative heights in order to get this working. I wanted my HTML interface to look exactly like my application GUI. My application contains a CListCtrl with exactly five rows and contains bitmaps exactly 48x48 and another CListCtrl at the bottom of the GUI which consumes the remaining window space.
I am not sure who is in charge of creating these standard W3C specifications. But in my opinion not being able to have both absolute height and relative heights is a huge barrier. I was beginning to see huge potential for using HTML in native applications for the GUI.
Best Wishes,
-David Delaune
|
|
|
|
|
Use divs, not tables
<div style="background-color:gray;height:100%">
<div style="height:100px;background-color:red;"> First row </div>
<div style="height:100px;background-color:green"> Second row </div>
Final row
</div>
Looks like:
First row Second row
Final row
cheers,
Chris Maunder
The Code Project | Co-founder
Microsoft C++ MVP
|
|
|
|
|
Chris,
I cannot get the code you provided to work with W3C XHTML DOCTYPE compliance mode. As I mentioned in one of my previous responses I get different height attribute behaviors based on the DOCTYPE declaration.
Paste this into a notepad generated HTML file and observe that it does not render full screen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div style="background-color:gray;height:100%">
<div style="height:100px;background-color:red;"> First row </div>
<div style="height:100px;background-color:green"> Second row </div> Final row</div>
</body>
</html>
I need the XHTML DOCTYPE because without it... the HTML renders completely different across all the browsers I am testing. My generated HTML tables are mimicking the behavior of a CListCtrl... but without the XHTML DOCTYPE the my tables look completely different depending on what browser I am using.
Is there something I am missing?
Best Wishes,
-David Delaune
P.S.
Off-topic: Where is the documentation for the codeproject <code> tag? I thought there was a lang=html argument for correct code syntax highlighting.
Edit: Nevermind... its on the PRE tag.
modified on Thursday, July 22, 2010 4:06 PM
|
|
|
|
|
Is there an actual need for XHTML? What about using:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> This will put you into Standards mode.
cheers,
Chris Maunder
The Code Project | Co-founder
Microsoft C++ MVP
|
|
|
|
|
Chris Maunder wrote: Is there an actual need for XHTML?
Yes, it appears so. I may have over-simplicated the description of my HTML GUI for the sake of brevity. I am mimicking both the CListCtrl and CTabCtrl which are skinned in my C++ GUI. They are also skinned in my HTML interface and it came out looking really good. But when I remove the HTML compliance mode... there are many render artifacts and minor visual differences when I test with various browsers.
Chris Maunder wrote: This will put you into Standards mode.
Did you test this first? If you paste the example HTML snippit I provided in my previous post and replace the DOCTYPE declaration with yours... nothing changes. From my understanding the height tag doesn't even exist in compliance mode.
Anyway some additional googling lead me to this:
100% Table Height[^]
The author provides an excellent explanation of the cause and at the bottom gives four samples which I will start playing with.
Best Wishes,
-David Delaune
|
|
|
|
|
Randor wrote: Did you test this first?
You mean apart from including the live HTML in my message[^] so you could see it in action? I'm not sure what you mean.
One caveat, though: I enclosed the DIVs inside a larger, fixed height div for display purposes. The lower div then expands to fill the height of the surrounding container.
Now, if you want the 3 DIVs to be full browser height, and not just the full height of a containing HTML element, then the following will do it. And yes, I tested in IE8, FF3.6, Opera10, Chrome and Safari. Note the lack of XHTML doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body,html{ height:100%; padding:0;margin:0; } <!-- force viewport to be height of browser window -->
</style>
</style>
</head>
<body>
<div style="background-color:gray;height:100%">
<div style="height:100px;background-color:red;"> First row </div>
<div style="height:100px;background-color:green"> Second row </div>
Final row
</div>
</body>
</html>
cheers,
Chris Maunder
The Code Project | Co-founder
Microsoft C++ MVP
|
|
|
|
|
If they have done it right, any post made by CSS will be moved to this forum with a notation such as "See also ...", and any topic started by css will immediately be moved here. "Quarantine".
|
|
|
|
|
In.
Your.
Dreams.
------------------------------------
I will never again mention that I was the poster of the One Millionth Lounge Post, nor that it was complete drivel. Dalek Dave
|
|
|
|
|
and, I am the first person to post in this thread and mean what I assume the forum means, cascading style sheets. How did we not have a forum for this before ?
Christian Graus
Driven to the arms of OSX by Vista.
Read my blog to find out how I've worked around bugs in Microsoft tools and frameworks.
|
|
|
|
|
Probably because it fell under web development.
Certainly when I had to make some enquiries on it that is where I went.
(OMG a serious Q and A!)
------------------------------------
I will never again mention that I was the poster of the One Millionth Lounge Post, nor that it was complete drivel. Dalek Dave
|
|
|
|
|
I have to ask, why in the world do you hate CSS? I love it, though not in any amorous fashion, for the consistency it allows me when designing sites. Combining Master Pages with CSS provides so much more control over the visual effects than anything previously available that I can't imagine ever going back to inline styles.
"A Journey of a Thousand Rest Stops Begins with a Single Movement"
|
|
|
|
|
Because programming languages are consistently designed, and CSS appears to have been thrown together at random by a drunken sailor. And then it works in one browser and not another ( this is not the fault of CSS, I understand, but it's part of the overall nightmare )
Christian Graus
Driven to the arms of OSX by Vista.
Read my blog to find out how I've worked around bugs in Microsoft tools and frameworks.
|
|
|
|
|
Christian Graus wrote: How did we not have a forum for this before ?
I must have been drunk. This has been temporarily fixed.
cheers,
Chris Maunder
The Code Project | Co-founder
Microsoft C++ MVP
|
|
|
|
|
You mean the sobriety is momentary?
L u n a t i c F r i n g e
|
|
|
|
|
I am having trouble with CSS.
I can't decide if he is a twat or a C##t.
------------------------------------
I will never again mention that I was the poster of the One Millionth Lounge Post, nor that it was complete drivel. Dalek Dave
|
|
|
|
|
Why does there have to be an OR involved?
i do believe there is something in the CSS specification that states it can be both at the same time.
|
|
|
|
|
#twat, #c__t
{
paranoia: 100%;
iq: 69;
}
I'd have made those apply to classes rather than ID's, but it's clear that CSS has no class. That's not a problem, however... elements can be stacked and nested. It's just a shame that they don't add up to much.
|
|
|
|
|
Dalek Dave wrote: I can't decide if he is a twat or a C##t.
Both!
Twunt!
|
|
|
|
|
That sir, is my new favorite word!
If the post was helpful, please vote, eh!
Current activities:
Book: Devils by Fyodor Dostoyevsky
Project: Hospital Automation, final stage
Learning: Image analysis, LINQ
Now and forever, defiant to the end.
What is Multiple Sclerosis[ ^]?
|
|
|
|
|
There is the possibility of some pleasure implied in both of those, no matter the pain required to get to it.
Opacity, the new Transparency.
|
|
|
|
|
While the nuances of the difference between them escapes me, I do believe that either comparison elevates his persona to a level above his reach. Indeed, many of the happiest moments of my life have been spent between the labia described by both terms, and I can't recall a single moment of pleasure spent in his cyber-company.
I think that you owe the generative orifices of slightly more than half the world's population an apology for making such an unjust comparison.
Now, if you wish to make reference to rectal sphincters in this connection, I have no objection whatsoever - carry on!
"A Journey of a Thousand Rest Stops Begins with a Single Movement"
|
|
|
|
|
This is going to be popular from the lounge and back room. A whole forum for poking fun at CaptainSeeSharp.
"WPF has many lovers. It's a veritable porn star!" - Josh Smith As Braveheart once said, "You can take our freedom but you'll never take our Hobnobs!" - Martin Hughes.
My blog | My articles | MoXAML PowerToys | Onyx
|
|
|
|
|
You mean another one?
L u n a t i c F r i n g e
|
|
|
|
|
What is your question, Sir?
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
