0

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?

3
Contributors
3
Replies
4
Views
6 Years
Discussion Span
Last Post by socr18
0

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.

0

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.

Edited by Altairzq: n/a

0

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;
}

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.