www.webdeveloper.com
Results 1 to 5 of 5

Thread: Setting 100% width for an element, it doesn't consider the scrollbar

  1. #1
    Join Date
    Jan 2013
    Posts
    82

    Setting 100% width for an element, it doesn't consider the scrollbar

    Hi
    I've a seimple code for create an black rectangle long as the entire body

    The problem is that when i resize di windows and the body goes under the min-width, scrollbar appears and moving it i see that the black rectangel is "cut" in the part that exceed

    Searching on internet, i've found that solution is to set margin and padding of the body element to 0px... in my case didn't work

    PHP Code:
    </head>

    <
    style type"text/css">

    htmlbody
    {  
        
    width100%;
        
    min-width:500px;
        
    height100%;
        
    min-height:700px;
        
    margin:0px;
        
    padding0px;  
    }

    #red {
         
    position:absolute;
         
    top:100px;
         
    width:100%;
         
    min-width:100%;
         
    height:37%;
         
    min-height:300px;
         
    max-height:330px;
         
    backgroundrgb(0,0,0);
         
    margin0px;
        
    padding0px;
    }

    </
    style>

    <
    body>

    <
    div id="red"></div>

    </
    body>
    </
    html

  2. #2
    Join Date
    Jan 2013
    Posts
    82
    after some proofs, i noted that removig position:absolute, the problem solves

    The fact is that i really need to se it in absolute position

  3. #3
    Join Date
    Mar 2011
    Posts
    1,108
    It's hard to suggest a solution without knowing your overall design for the page. In your example code, you're positioning the #red <div> with respect to the <body> element. So when the browser window is changed to be narrower than your min-width setting for the <body>, part of that <body> element is cut off from view and the #red <div> is cut off along with it.

    If you'll explain your layout in more detail, I'm sure someone can suggest a solution for you.
    Rick Trethewey
    Rainbo Design

  4. #4
    Join Date
    Mar 2013
    Posts
    8
    html, body {height:100%;width:100%;overflow:hidden}
    </body>
    </html>

  5. #5
    Join Date
    Jan 2013
    Posts
    82
    Quote Originally Posted by rtrethewey View Post
    It's hard to suggest a solution without knowing your overall design for the page. In your example code, you're positioning the #red <div> with respect to the <body> element. So when the browser window is changed to be narrower than your min-width setting for the <body>, part of that <body> element is cut off from view and the #red <div> is cut off along with it.

    If you'll explain your layout in more detail, I'm sure someone can suggest a solution for you.
    i just want that red assumes the exact body width, not only the visible part

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles