Using 100% height and not more

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Charles - 24 Sep 2006 10:34 GMT

I am designing a small HTML editor, and in the lower pane, I want the
textarea to use 100% height with the toolbar, but no more than that:
http://www.auriance.com/docs/tmp/editor/

Actually it uses 100% + 25px of the toolbar, which means if you click
an icon of the toolbar, it disappears instantly. How could I solve it?
Also resizing the frames doesn't work properly in IE...

Thanks,

Reply to this Message

Charles - 25 Sep 2006 23:35 GMT

Any idea?

Reply to this Message

Martin Eyles - 28 Sep 2006 09:48 GMT

>I am designing a small HTML editor, and in the lower pane, I want the
> textarea to use 100% height with the toolbar, but no more than that:
[quoted text clipped - 3 lines]
> an icon of the toolbar, it disappears instantly. How could I solve it?
> Also resizing the frames doesn't work properly in IE...

Trying to start looking at it simply, looked at that bottom frame on its
own. However didn't get very far, as when I added the dtd to the top, to
take the browser out of quirks mode...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

the textarea shrank. Hope this maybe gets more ideas going, but alas I can't
think what else needs to be done to fix the problem at the moment

Martin

Reply to this Message

Ben C - 28 Sep 2006 10:04 GMT

> I am designing a small HTML editor, and in the lower pane, I want the
> textarea to use 100% height with the toolbar, but no more than that:
> http://www.auriance.com/docs/tmp/editor/
>
> Actually it uses 100% + 25px of the toolbar, which means if you click
> an icon of the toolbar, it disappears instantly. How could I solve it?

form {
position: absolute;
top: 25px;
bottom: 0px;
width: 100%;
}

#input {
width: 100%;
height: 100%;
}

in input2.html

The way absolutely-positioned things work is if you set top and bottom,
but leave height to auto you get whatever height is necessary to give
you the distances you asked for from the top and bottom of your
containing block.

In this case the containing block is the frame, whose height is 50% of
the viewport.

> Also resizing the frames doesn't work properly in IE...

Can't help you there I'm afraid...

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / September 2006

Using 100% height and not more