Can I force the form to extend to 90% of the body height?

  • Thread starter Thread starter AAaron123
  • Start date Start date
A

AAaron123

<body runat="server" id="MainBody">

<form id="form1" runat="server" style="background-color:green; width: 100%;
height: 100%">

<br />

Table1" runat="server" Style="background-color:Yellow; width: 100%; height:
90%" BorderColor="Maroon"

BorderWidth="9px" BorderStyle="Ridge">



The body fills the IE window with it's color.

A little green shows at the top (because of the <br/>)

I also placed a <br/> after the bottom of the table and a little green show
there.

The yellow table fills the table between those two green areas.



The form's width does fill 100% of the body.

The two green areas show where the form is and the form does not cover 90%
of the body height!



That's my problem.

Can I force the form to extend to 90% of the body height some how?



Thanks
 
First of all, using <br/> tags to add space above and below elements is very
bad practice, since different browsers display them differently (sometimes
different sizes, etc.). I would suggest that you use CSS margins instead.
But I am also noticing that you have the height for your form set to 100%,
not 90%. If you are expecting the form to take up 90% because of the 90% in
the table, that will not work. When you use percentages for height and
width, it is that percentage of the container. So your form will take up the
entire height (except for the space from your <br/> tags) of the body, and
the table will take up 90% of the form. I would suggest the following:

<body runat="server" id="MainBody">
<form id="form1" runat="server" style="background-color:green; width:
100%; height: 90%; margin-top:10px;margin-bottom:10px;">
<asp:Table id="Table1" runat="server" Style="background-color:Yellow;
width: 100%; height: 100%; border:Maroon 9px Ridge;">

I have never been a fan of using percentages, but I'm also not a designer,
but I'm sure you know about some of the weird things browsers sometimes do
when rendering tables (they don't always like to cooperate with us as far as
heights and widths). Another thing you can try is to actually make the
height for both the form and table 100%, and since you are now specifying
margin-top and margin-bottom, you don't need to make the height any less
than 100%. Try some of this stuff, but the two key things I've mentioned
that you should take into account is how a height is calculated when a
percentage is used, and to use margins rather than <br/> tags. Good Luck!
 
Nathan Sokalski said:
First of all, using <br/> tags to add space above and below elements is
very bad practice, since different browsers display them differently
(sometimes different sizes, etc.). I would suggest that you use CSS
margins instead. But I am also noticing that you have the height for your
form set to 100%, not 90%. If you are expecting the form to take up 90%
because of the 90% in the table, that will not work. When you use
percentages for height and width, it is that percentage of the container.
So your form will take up the entire height (except for the space from
your <br/> tags) of the body, and the table will take up 90% of the form.
I would suggest the following:
Click to expand...

Some switch in my head flipped and I wrote that I expected the form to be
90% instead of expecting the Table to be 90%.

I only used the <br/> so that I could see the form's color.

Using your suggestion to use margins I used the following:
<body runat="server" id="Body1">

<form id="form2" runat="server" style="background-color:green; width:100%;

height: 100%; margin-top:20px; margin-bottom:20px;">

<asp:Table id="Table2" runat="server" Style="background-color:Yellow;

width: 100%; height: 90%; border:Maroon 9px
Ridge;margin-top:20px;margin-bottom:20px;">


I should say that this is a .master

If the content forms are small the table scrinks to fit and the form follows
suit leaving a bottom margin much larger than 20px.

If I don't use percentage I may pick a too small height for the content it
will cause my display to not use all of the availabe browser height and use
scroll bars when it did not have to. I'd have the same effect I just
described. If I pick a too large height I'll have scroll bars that scroll to
the unused area at the bottom.

Isn't that correct?

The fact that the content forms vary in height and I'd like the display to
adapt to them is the root of the problem.


I remove the two heights and it work the same. The bottom of the table moves
as I menu to different content but it looks OK.

Without percentages how would you do it?

Thanks
 
the width and height set the size of the content area of a block element.
(inline element the values are ignored). if the value is specified as a
percent, then its a pecent of its parent's content area. note, margin, border
and scrollbars are outside the width. if the parent does not have an explicit
size, then the value is ignored.

try the following:

<html>
<body>
<div style="width:100%;height:100%;background-color:blue;" ></div>
<div style="width:100%;height:100%;background-color:yellow;" ></div>
</body>
</html>

you will see two boxes. each silghtly smaller than the screen size because
body has a margin by default.

-- bruce (sqlwork.com)
 
bruce barker said:
the width and height set the size of the content area of a block element.
(inline element the values are ignored). if the value is specified as a
percent, then its a pecent of its parent's content area. note, margin,
border
and scrollbars are outside the width. if the parent does not have an
explicit
size, then the value is ignored.
Click to expand...

In my situation the tables parent, the form, had 100% which does not count
as an explicit size, so the table's 90% size was ignored. Right?

Maybe I should have stared with what I wanted to do.

My content pages each contains a div element containing html text.
Sometime a little and sometime a lot.
These end up oneat a time in one of the .master's table cells.
I'd like the content area to be a large as possible so if there is much text
and it could all fit on the screen it is not cramed into a small area with
scroll bars.
However, I don't want to explicitly make the area large because when there
is little text there will be scroll bars that scroll into black area.

Thanks for the info
 
Back
Top