...

View Full Version : Horizontal div and vertical div (height 100%) exceeding viewport



Sergillop
04-05-2011, 11:31 AM
Hello, I have this simple layout:



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.

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

Excavator
04-05-2011, 11:41 AM
Hello Sergillop,
Your #col is 100% of the viewer height, the 40px #menu is added to that. To get it all to fit in one screen, try this -
#col {
background-color:#99CCFF;
display:block;
position:relative;
height:100%;
width:300px;
margin: -40px auto 0;
}

Excavator
04-05-2011, 11:53 AM
Then make it all lay right with these changes -
#menu {
background: #333;
color: #ffffff;
height: 40px;
position: relative;
z-index: 2;
}
#col {
background: #99CCFF;
display: block;
position: relative;
height: 100%;
width: 300px;
margin: -40px auto 0;
padding: 40px 0 0;
z-index: 1;
}

Sergillop
04-05-2011, 12:03 PM
Hello Excavator, thanks for the reply!

Seems it's still taller than the viewport. I think now it's because of the padding.

Sergillop
04-05-2011, 01:33 PM
Now it works! just taking the padding from the div and putting it in the paragraph inside.


Thanks again Excavator :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum