14 replies [Last post]
mrtnr
Offline
newbie
Last seen: 16 years 20 weeks ago
Timezone: GMT+1
Joined: 2005-07-08
Posts: 9
Points: 0

is there some way of making a div, that is a child of another div of some specified size, (vertically) fill out the remaining space of the parent div?

i need the solution for a layout where contents are placed in "windows".

example:

<div class="window">
     <div class="windowtitle">Title of window</div>
     <div class="windowcontents">
          <!-- This should vertically fill the remaining space of div.window -->
     </div>
</div>

The layout is to be liquid where div.window has some percentage height (of the browser window), div.windowtitle has unspecified height (depending on the title) and then div.windowcontents fills up the remaining space of div.window ([30% of the browser window height]-[height of div.windowtitle]).

I realize this can be accomplished easily using javascript, but i'd prefer using only CSS.

is there any way of making this happen?

drhowarddrfine
Offline
Leader
Last seen: 11 years 51 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

how do i make div's fill out vertically?

This questin seems to be asked almost daily here. Check the "How-To" or google for "clearing floats".

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

mrtnr
Offline
newbie
Last seen: 16 years 20 weeks ago
Timezone: GMT+1
Joined: 2005-07-08
Posts: 9
Points: 0

how do i make div's fill out vertically?

maybe i'm just stupid, but i dont see how clearing floats (as shown at http://www.quirksmode.org/css/clearing.html) will solve my problem?

the inner divs are not supposed to appear side by side, but the second to appear below the first, as shown at http://www.martinrosell.com/csswindow.gif (i've added scrollbars just to show why the div.windowcontent is needed).

i.e. the div.windowtitle is to be on top, and below that (filling out the rest of div.window) the div.windowcontent.
so the div.windowcontent needs to fill out the parent div even if it has no contents (just a gray background with borders left, bottom and right).

or is there something about clearing floats i'm missing?

drhowarddrfine
Offline
Leader
Last seen: 11 years 51 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

how do i make div's fill out vertically?

Sorry, I misunderstood. Try this to get you started I hope:
HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link rel=stylesheet href="test.css" type="text/css" />
<meta http-equiv =" Content-Type" content =" text/html; charset = ISO-8859-1" />
</head>

<body>

<div class="window">
<div class="windowtitle">Title of window</div>
<div class="windowcontents">
This should vertically fill the remaining space of div.window
</div>
</div>

</body>
</html>

CSS:

html,body
{
height:100%;
width:100%;
}

div.window
{
position:relative;
width:30%;
height: 30%;
}

div.windowcontents
{
height: 100%;
background-color: #ccc;
}

div.windowtitle
{

background-color:#aaa;
}

Remember that the 30% has to be 30% of the parent which, in this case, is the body but the body is unspecified so we set it to 100% of its parent, <html>. The div.windowcontents will now be 100% of its parent, div.window.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

mrtnr
Offline
newbie
Last seen: 16 years 20 weeks ago
Timezone: GMT+1
Joined: 2005-07-08
Posts: 9
Points: 0

how do i make div's fill out vertically?

i've tried this before, but the problem is exactly that "the div.windowcontents will now be 100% of its parent, div.window".

since div.window also contains div.windowtitle, div.windowcontents will stretch outside the boundaries of div.window. like shown at http://www.martinrosell.com/csswindow_try1.gif. see how the scrollbar is cut at the bottom border.

so what i need the height of div.windowcontent to be is (100% of div.window) minus (height of div.windowtitle).

any suggestions?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

how do i make div's fill out vertically?

Can you show us a practical application of the layout? My first inclination is to rid the code of the header and content divs and just code the stuff with proper html markup.

You may have compelling reason for what you're doing, but it is quite common for folks to get 'divitis', a condition that causes serious overuse of the div wrapper markup. Without evidence to the contrary, your request tends to invoke a strong suspicion that that is the case.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

drhowarddrfine
Offline
Leader
Last seen: 11 years 51 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

how do i make div's fill out vertically?

Insert overflow:auto into div. windowcontents

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 12 years 37 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

how do i make div's fill out vertically?

curious...

Quote:
but it is quite common for folks to get 'divitis'

what are the symptoms of the "divitis" bug?

drhowarddrfine
Offline
Leader
Last seen: 11 years 51 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

how do i make div's fill out vertically?

When you find divs crawling all over the place, ie:

<div id="outer">
<div id="inner">
<div><h1>Hello, World!</h1></div>
</div>
</div>

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

mrtnr
Offline
newbie
Last seen: 16 years 20 weeks ago
Timezone: GMT+1
Joined: 2005-07-08
Posts: 9
Points: 0

how do i make div's fill out vertically?

i thought the linked images would be evidence enough of the need for divs, but maybe there is a better solution. if you know of one, please do tell.
the application will consist of several "windows" per page, each containing different kind of contents. also, we want to fully separate information from presentation and therefore keep the html as "unformatted" as possible.

- the surrounding div is because the need of a positionable box (i.e. a window). div? i'd say so.
- the div.windowtitle is because the need of a titlebar (with a background image) filling the full width. a div seems like the best solution to me.
- the div.windowcontents is because the need of a scrollable box. definately a div, right?

how do you mean i should code it with proper html markup? what would the proper-markup-way look like?

overflow:auto; will just "solve" the problem while the contents fit within div.window. the present overflow:scroll; was just to point out that this need to work aswell (since scrollbars might be present).

regards,

-
martin

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

how do i make div's fill out vertically?

From the pic of the login box, that probably needs only the outer div. So, again, I'm thinking you're over-engineering it. Can you post a live link to what you have so far? And if that does not render as you want, give us a (link to a) pic of what the page is supposed to look like.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mrtnr
Offline
newbie
Last seen: 16 years 20 weeks ago
Timezone: GMT+1
Joined: 2005-07-08
Posts: 9
Points: 0

how do i make div's fill out vertically?

well, naturally, if all i needed was a login box there would be no problem. i can see why you in that case thought i was over engineering it. maybe my explanation wasn't the best Smile

the login box was just to give you an (as simple as possible) example of the problem.

but, like i said, what i need is a (universal) solution for a layout in which contents are placed in liquid windows. the windows need to be scrollable in case the contents dont fit within the window. and the problem at hand is: how do i make the inner div.windowcontent fill up the remaining (no more, no less) height of div.window?

an example can be found at http://www.martinrosell.com/csswindow/ and the CSS is here http://www.martinrosell.com/csswindow/css/global.css.

the height of the div.windowcontent is now set to 100% as suggested above.

on coding this example i also noted a new problem with scrolling in Firefox. scroll the lower window and you see what i mean (the content is virtually "cut off").

regards,

-
martin

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

how do i make div's fill out vertically?

Now I see what you're trying to do. Basically, it's not doable with css. Fortunately in a practical sense it can usually be worked around or be unnecessary. A well designed page seldom needs an exact height. It may need a fixed height, but the actual metric is not usually critical. Designers with a graphics/print background tend to marry themselves to measures, but the web is not print.

If you run into a page design that gives you this type of problem, bring it to us. We'll either find a fix, a work-around, or a design modification that will work.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mrtnr
Offline
newbie
Last seen: 16 years 20 weeks ago
Timezone: GMT+1
Joined: 2005-07-08
Posts: 9
Points: 0

how do i make div's fill out vertically?

provided i wanted this kind of layout http://www.martinrosell.com/csswindow/ (CSS http://www.martinrosell.com/csswindow/css/global.css), what solution would you suggest?

i'd rather not have to scroll the main page (since that might put some possibly crucial information out of the users view). i guess a fixed total height would be acceptable (we have a resolution requirement for the application), although i'd prefer it liquid vertically aswell.

regards,

-
martin

mrtnr
Offline
newbie
Last seen: 16 years 20 weeks ago
Timezone: GMT+1
Joined: 2005-07-08
Posts: 9
Points: 0

how do i make div's fill out vertically?

i've come up with a solution i think. some unnecessary space will be present at the bottom, but it should work nicely down to a reasonably low resolution, and also allow for some ctrl-scrolling (i.e. changing of font size).

the result is here http://www.martinrosell.com/csswindow2/ (CSS: http://www.martinrosell.com/csswindow2/css/global.css) for those interested.

if you know of a better solution, please let me know.

regards,

-
martin