Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

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

    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?
    Last edited by Sergillop; 04-07-2011 at 08:04 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    #col {
    			background-color:#99CCFF;
    			display:block;
    			position:relative;
    			height:100%;
    			width:300px;
    margin: -40px auto 0;
    		}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • The Following 2 Users Say Thank You to Excavator For This Useful Post:

    krichevskoy (04-05-2011), Sergillop (04-07-2011)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Then make it all lay right with these changes -
    Code:
    		#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;
    		}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • The Following 2 Users Say Thank You to Excavator For This Useful Post:

    krichevskoy (04-05-2011), Sergillop (04-07-2011)

  • #4
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hello Excavator, thanks for the reply!

    Seems it's still taller than the viewport. I think now it's because of the padding.
    Last edited by Sergillop; 04-07-2011 at 08:04 AM.

  • #5
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Now it works! just taking the padding from the div and putting it in the paragraph inside.


    Thanks again Excavator
    Last edited by Sergillop; 04-07-2011 at 08:04 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •