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 3 of 3
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Scroll Bar in Div to be removed

    I want to remove the scroll bar that is coming in the image shown.
    Coding is also provided.
    Please check and tell.



    Code:
    <html>
    
    <head>
    <style type="text/css">
    #container{
    position:relative;
    width:100%;
    height:100%;
    background-color:#FEF0C9;
    overflow-y:scroll;
    }
    
    #l1{
    position:absolute;
    width:200px;
    height:200px;
    top:10px;
    background-color:green;
    }
    
    #l2{
    position:absolute;
    width:200px;
    height:200px;
    top:230px;
    background-color:green;
    }
    
    #l3{
    position:absolute;
    width:200px;
    height:200px;
    top:460px;
    background-color:green;
    }
    
    #r3{
    position:absolute;
    width:200px;
    height:200px;
    top:690px;
    background-color:green;
    }
    
    
    
    #header{
    width:100%;
    height:200px;
    background-color:blue;
    }
    
    #innercontainer{
    position:relative;
    width:60%;
    min-height:100%;
    background-color:red;
    overflow-y:scroll;
    }
    
    
    
    
    
    </style>
    </head>
    <body>
    
    <div id="container">
    
    <div id="header">
    </div>
    
    <div id="innercontainer">
    
    <div id="l1">
    
    </div>
    
    <div id="r1">
    
    </div>
    
    <div id="l2">
    </div>
    
    <div id="r2">
    </div>
    
    <div id="l3">
    </div>
    
    <div id="r3">
    </div>
    
    </div><!--Inner Container-->
    
    </div>
    </body>
    </html>

  • #2
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    #container {
    position:relative;
    width:100%;
    height:100%;
    background-color:#FEF0C9;
    overflow-y: hidden;
    }
    #E: i guess it is actually #innercontainer but the code you privided does not give the result in the picture.
    Last edited by Nitro3k; 05-23-2012 at 06:59 PM.

  • #3
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    just remove the overflow-y and drop the height. The div will then size to content. Height:100% is redundant the defaut is auto which resolves to 100%.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&


  •  

    Posting Permissions

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