Horizontal div and vertical div (height 100%) exceeding viewport

[Altairzq]

Hello, I have this simple layout:

http://www.jahosapstot.cat/test/test.html

As you can see the vertical div ("col"), wich is set at height 100%, is longer than the viewport, making the scroll bar to appear.

This does not happen if the horizontal div ("menu") does not exist (it adds the "menu" height to the viewport height, I guess).

Is there a way to have the vertical div to expand to the bottom of the viewport only? So there is no vertical scroll?

[MagicMedia]

Try to put everything in a container div with a 100% height. Right now the second div is 100% height of the parent, which is the browser.

[Altairzq]

Try to put everything in a container div with a 100% height. Right now the second div is 100% height of the parent, which is the browser.

Hello Magic, is this is what you mean?
http://209.188.82.4/~jahosaps/test/test4.html

I have now "menu" and "col" inside of "wrap", which is 100% height. Problem is, if I tell "col" to be 100% height also, it exceeds again the viewport height, because of the "menu" div. If I don't specify height, then it only expands to the text inside it.

[socr18]

Give this a try.

#menu {
background-color: #333;
color: white;
height: 40px;
float: left;
width: 100%;
}

#col {
background-color: #9CF;
display: block;
height: 100%;
width: 300px;
margin-left: auto;
margin-right: auto;
}