ansaurus

Question

100% div height

Answer 1

A:

try adding

min-height:100%; to your css, chk out this example

c0mrade 2010-01-25 08:23:01

`min-height` is not well supported by all browsers

poke 2010-01-25 08:24:15

Well I gave him example .. he can see everything there how to accomplish his goal, he cause height instead .. he will get the same results

c0mrade 2010-01-25 08:27:25

@poke: Is IE6 still assumed to be relevant unless specified otherwise?

Anonymous 2010-01-25 08:31:35

@c0mrade, getting a 100% height for the mother div is not a problem. The problem is getting the left and right divs to fit in the remain screen view below the header div.Checkout http://www.yell.com/maps/MapAction.do and see how the left side behaves as content changes.

Q_the_dreadlocked_ninja 2010-01-25 08:41:18

well if you can't get it done you can always, use the javascript, get window height and set value in pixels to your left side.

c0mrade 2010-01-25 09:52:18

Answer 2

A:

To have a div with 100% height of the browser, the parent needs to have a 100% height as well. Try adding the following css:

html, body { height: 100%; margin: 0; padding: 0; }

poke 2010-01-25 08:23:41

I've got that code already. my main div("container") is ok, it has 100% height. My header has a height of 100px - I want div"wrapper" and its children("left" and "right") to fit in remaining screen view.

Q_the_dreadlocked_ninja 2010-01-25 08:31:51

Answer 3

+3 A:

If you make all elements in the same level be 100% width and height you'll get unexpected behavior between browsers. With the example you've given you're trying to give header and wrapper all the space within the parent.

100% container
+----------------------------+
| 100% header  100% wrapper  |
| +----------+ +-----------+ |
| |         errr...?       | |
| +----------+ +-----------+ |
+----------------------------+

How is that supposed to be possible really? There are several ways of doing this either:

the first element gets all the space or,
both have to overlap or,
they both share the space

So you need to be more specific when giving percentages.

By the way have you tried floating your elements?

position: relative; // or absolute
float: left;

Spoike 2010-01-25 08:28:36

I have edited to give a bit of logic to what i want to achieve.

Q_the_dreadlocked_ninja 2010-01-25 08:36:24

Answer 4

+4 A:

If I'm understanding correctly, you want to float divs right and left inside your wrapper div, but retaining the wrapper div's full height in the screen?

If so, the right and left div of course go inside the wrapper, and you use { ... float: left; position: relative;} and {... float: right; position: relative;} to float them to the sides.

Now, because you've floated these two divs which are part of the content of your wrapper div, the wrapper itself may have zero height. This is because the two divs inside "float out of it". To give your wrapper the same height as the two divs inside have, you can EITHER:

put this as a third div inside your wrapper: <div style="clear: both;"></div> OR
put any element inside your wrapper after the two divs (like a span) and give it a CSS property of {... clear: both;}

Now you've "cleared the floats" and your wrapper has the full height of the two divs inside.

IF ON THE OTHER HAND, you want all your content to stretch to the full height of the screen always without regard to what you've put in there, you'll need to do some CSS magic and it gets too complicated to explain without seeing your code. Start here: http://ryanfait.com/sticky-footer/

Hope that helps.

Tom 2010-01-25 09:29:44

ansaurus

tags:

views:

answers:

100% div height

related questions