Set div height to 100% minus a fixed pixel value?

C

Ciaran

Lets say I have 5 un-nested divs alone on a page, each containing some
content.
Div 1,2,4 and 5 are fixed height, lets say 30px each.

How do I make div number 3 take up the rest of the height available to
the browser? In other words, div3 should be height 100%-120px

This is one thing thats quite straight forward using tables but never
really transferred over when divs and css came into the mainstream.

Thanks,
Ciarán
 
R

Roy A.

Lets say I have 5 un-nested divs alone on a page, each containing some
content.
Div 1,2,4 and 5 are fixed height, lets say 30px each.

How do I make div number 3 take up the rest of the height available to
the browser? In other words, div3 should be height 100%-120px

This is one thing thats quite straight forward using tables but never
really transferred over when divs and css came into the mainstream.

I think you are confusing CSS with things that is possible in Internet
Explorer.

In CSS 2.1 you can use CSS tables to do what you want.
http://www.w3.org/TR/CSS2/tables.html#table-display

html, body, .table {height: 100%;}
..table { display: table }
..tr { display: table-row }
..td { display: table-cell }
..a, .b, .d, .e { height: 30px }

<div class="table">
<div class="tr"><div class="td a">a</div></div>
<div class="tr"><div class="td b">b</div></div>
<div class="tr"><div class="td c">c</div></div>
<div class="tr"><div class="td d">d</div></div>
<div class="tr"><div class="td e">e</div></div>
</div>

This will of course not work in old legacy browsers.

It will not work in Internet Explorer either, or other less compliant
browsers.
 
D

dorayme

<[email protected]
m>,
Ciaran said:
Lets say I have 5 un-nested divs alone on a page, each containing some
content.
Div 1,2,4 and 5 are fixed height, lets say 30px each.

How do I make div number 3 take up the rest of the height available to
the browser? In other words, div3 should be height 100%-120px

This is one thing thats quite straight forward using tables but never
really transferred over when divs and css came into the mainstream.

There are issues. But how about this to chew on:

<http://dorayme.netweaver.com.au/ciaran.html>
 
C

Ciaran

Woah! Excellent! Thanks Dorayme - its exactly what I was looking for.
Now that I see it, I'm not sure why I didnt figure that out! Thats why
I love this newsgroup - you get exactly what you want instantly!
Thanks again,
Ciarán



Ah - now I see why I didnt figure it out! My middle div (div3) is
actually an iframe which seems to ignore the CSS bottom positioning
unless a height is set. I'll keep playing with it. Now that I know a
div's height can be set like this there must be some way to tweak it
to work with an iframe.

Ciarán
 
C

Ciaran

Ah - now I see why I didnt figure it out! My middle div (div3) is
actually an iframe which seems to ignore the CSS bottom positioning
unless a height is set. I'll keep playing with it. Now that I know a
div's height can be set like this there must be some way to tweak it
to work with an iframe.

Ciarán



Got it - if you wrap the iframe inside div3 and set it to height:100%
it matches the divs fluid height.

Thanks again for all replies!
Ciarán
 
D

dorayme

<[email protected]
m>,
Ciaran said:
Ah - now I see why I didnt figure it out! My middle div (div3) is
actually an iframe which seems to ignore the CSS bottom positioning
unless a height is set. I'll keep playing with it. Now that I know a
div's height can be set like this there must be some way to tweak it
to work with an iframe.

Now running into more issues... but this sort of works in some
browsers:

<http://dorayme.netweaver.com.au/ciaran_iframe.html>
 
R

Roy A.

perhaps for the older browsers:

<table height=100%>
  <tr height=30px><td>1 potato</td></tr>
  <tr height=30px><td>2 potato</td></tr>
  <tr><td>3 potato</td></tr>
  <tr height=30px><td>4</td></tr>
  <tr height=30px><td>5 potato</td></tr>
</table>

Yeah, I knew Internet Explorer 8 was an old browser, at least it still
can't handle hole chapters in a eleven years old recommendation (12-
May-1998).
http://www.w3.org/TR/2008/REC-CSS2-20080411/

Even Netscape Navigator supported CSS tables before it was canceled.
 
D

dorayme

Ben C said:
Brilliant. If there are borders and things around the place, left: 0 and
right: 0 may be a better choice than width: 100% on all these positioned
divs.

Good point about the better choice. Also it is more elegant
Ockhamwise, just using box offsets instead of box offsets and
widths.
 
C

Ciaran

Good point about the better choice. Also it is more elegant
Ockhamwise, just using box offsets instead of box offsets and
widths.


I'm back again with a new challenge! Using the 5 div example in my
original post, is it possible to set this to be the min height? In
other words can it stretch when its content is larger than it is??

Cheers,
Ciarán
 
D

dorayme

<[email protected]
m>,
Ciaran said:
I'm back again with a new challenge! Using the 5 div example in my
original post, is it possible to set this to be the min height? In
other words can it stretch when its content is larger than it is??

Can what stretch? And give an example of something that is bigger
than itself. I broke into Library Central and searched high and
low for the phenomena and all the philosophers agree that nothing
can be bigger than itself. I looked desperately for even an
outsider opinion, I would have gladly have made the most of any
reasoning offered. But nothing. I was up all night avoiding
security guards too.

Try adding just this this just after the CSS for body:

div {overflow: auto;}
 
C

Ciaran

<[email protected]
m>,




Can what stretch? And give an example of something that is bigger
than itself. I broke into Library Central and searched high and
low for the phenomena and all the philosophers agree that nothing
can be bigger than itself. I looked desperately for even an
outsider opinion, I would have gladly have made the most of any
reasoning offered. But nothing. I was up all night avoiding
security guards too.

Try adding just this this just after the CSS for body:

div {overflow: auto;}



Ha ha I meant if the the content inside the stretching div (div3) does
not fit into the height created by the absolute positioning of that
div.

overflow:auto scrolls the content while overflow:visible shows it
without enlarging the div. I have a feeling this one's beyond the
possibilities of css2!

Thanks,
Ciarán
 
D

dorayme

Ben C said:
Suppose you had broken into a bigger library than you did. Then the
library would have been bigger than it was. If it's possible for
something to have been bigger than it was, then it must also be possible
for it still to be bigger than it is.

Your second sentence does not follow from your first.

I am fairly sure that I broke into a library that might have been
bigger than it was, not one that was bigger than it was.

According to one possible world theory, there are an infinite
number of libraries, a subset of these being what makes for the
truth of counterfactuals. In this theory, it could only be true
that the library might be bigger than it was if there is a
library that is bigger than it (but in another world).
 
D

dorayme

<[email protected]
m>,
Ha ha I meant if the the content inside the stretching div (div3) does
not fit into the height created by the absolute positioning of that
div.

If you want the contents of the stretch div to remain in the
stretch div, put overflow: auto on this div. Then, if the content
is very large, it will always be able to be read by operation of
the scroll bars.

Now, perhaps you are meaning that if the content of the stretched
div is *not* at all large in relation to the space that is
stretched but that you would like it to be? Either this
contradicts what you originally wanted or else what you want is
for the whole browser window to lose height so that div 1, 2, 4,
and 5 are 300px high and just enough height more is provided for
the content in div 3 to fit in without need of scrolling. But no,
this is hardly possible without javascript. At least I can't see
it.
 
C

Ciaran

<[email protected]
m>,








If you want the contents of the stretch div to remain in the
stretch div, put overflow: auto on this div. Then, if the content
is very large, it will always be able to be read by operation of
the scroll bars.

Now, perhaps you are meaning that if the content of the stretched
div is *not* at all large in relation to the space that is
stretched but that you would like it to be?  Either this
contradicts what you originally wanted or else what you want is
for the whole browser window to lose height so that div 1, 2, 4,
and 5 are 300px high and just enough height more is provided for
the content in div 3 to fit in without need of scrolling. But no,
this is hardly possible without javascript. At least I can't see
it.


I think you are right about the need for JS. Although I'm not sure
what I've asked has come across fully. I'd like div 1,2,4 & 5 to
always remain at 30px. div3 should be at least the remaining height of
the browser window. If it needs to, div3 should stretch downward so
that the scrollbar is on the main page rather than internally on div3.

This is more of a curiosity to me than a necessity for a project so
theres no need to go to any great lengths to design a solution!

Thanks,
Ciarán
 
D

dorayme

<[email protected]
Ciaran said:
I think you are right about the need for JS. Although I'm not sure
what I've asked has come across fully. I'd like div 1,2,4 & 5 to
always remain at 30px. div3 should be at least the remaining height of
the browser window. If it needs to, div3 should stretch downward so
that the scrollbar is on the main page rather than internally on div3.

Let's suppose all the divs except 3 remain at 300px high. Let's
suppose that *if* it were truly to be in the flow (which it
isn't, it is abs positioned), the content of 3 would be more than
any browser could display without some sort of scrolling. In
other words a lot and no real screen would likely be able to fit
it in height wise.

But you are wanting the scroll bars on the browser viewport
window itself, not on the the hugely filled div 3? And you are
wanting, presumably that the operation of the viewport scrollbars
just scroll div 3? I am even doubtful that JS can do this.
Perhaps it can? I know what can: but it costs heaps and you need
to send a small deposit before I lend it you, my magic HTML wand.
<g>
 
D

dorayme

Ben C said:
Yup, so a library can be bigger than its counterpart in one of these
parallel worlds, and in that sense bigger than it is (in this world).

Perhaps. But I have misgivings. It looks too much like a made up
sense, it has no naturalness.

What we have are two worlds, almost identical and differing only
in that in the one there is a particular library in a particular
place that is bigger than the one in the other world in as
similar a location as possible. It is perfectly sensible to say a
library might have been bigger than it is. And, if the theory we
are talking is right, that comes down to there being this other
library in another world. But in none of this is there a real
sense in which one and the same thing is bigger than it is. In
fact, if you can show that there is, that might well be a good
argument against the theory because what could be more certain
than that nothing *is* any other size than it is?
 
D

dorayme

Ben C said:
This doesn't sound impossible at all and I don't think you need JS. But
I haven't been following all this.

You just want a few divs side by side that are 300px high, and another
one that it is at least as high as the viewport, but higher if required
by its contents?

This is no problem at all, and can be done as I described in my recent
post, with a div with min-height: 100% inside an absolutely positioned
div. Scrollbars will be on the viewport.

I am lost on this... divs side by side? But I am sure I never
really grasped what the OP was wanting in this further enquiry
about min height... tried my best to make sense of it... Perhaps
a better description of what is wanted might help and a URL that
exhibits your solution. If the OP agrees the solution is right
for his question, I am more than likely to see what his question
was instead of my present sense of puzzlement.
 
C

Ciaran

I am lost on this... divs side by side? But I am sure I never
really grasped what the OP was wanting in this further enquiry
about min height... tried my best to make sense of it... Perhaps
a better description of what is wanted might help and a URL that
exhibits your solution. If the OP agrees the solution is right
for his question, I am more than likely to see what his question
was instead of my present sense of puzzlement.



Thanks for the replies on this guys. It's not that complex an idea -
just difficult to explain. What I was asking was exactly like this
example that dorayme set up a few weks back: <http://
dorayme.netweaver.com.au/ciaran.html>
EXCEPT:
If there were too much content in div3 to fit within the height
created by it's absolute positioning, div3 would increase in height to
compensate and divs 4 & 5 would move down beneath the viewport,
creating a scroll on the main page.

I think the easiest solution might be to have a JS function check if
div3's contents had expanded beyond it's container, and if so, switch
all divs to static positioning.

Ciarán
 
D

dorayme

Ben C said:
....

dorayme's example with a couple of tweaks:

http://www.tidraso.co.uk/misc/ciaran2.html

Same thing with lots of content in the middle:

http://www.tidraso.co.uk/misc/ciaran2b.html

A small further tweak fixes white space between the second div
and the bit that stretches: add 'background: #cfc' to #stretch as
well as your #stretchContents.

With lots of paras, there is a white space at bottom after
scrolling as far down as possible.

And you can't actually get to the end of the content by scrolling
when there is a lot. Try adding to the very last para some
distinctive unique phrase for the doc like "the end" It does not
show on my Safari or Fireworks. Divs 4 and 5 are there OK, it is
just that the content of #stretchContents gets cut off.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top