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?

Recommended Answers

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.

Jump to Post

All 3 Replies

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.

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.

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.