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

**American horizo** · 03-02-2013 04:09 AM

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">



html, body

{  

    width: 100%;

    min-width:500px;

    height: 100%;

    min-height:700px;

    margin:0px;

    padding: 0px;  

}



#red {

     position:absolute;

     top:100px;

     width:100%;

     min-width:100%;

     height:37%;

     min-height:300px;

     max-height:330px;

     background: rgb(0,0,0);

     margin: 0px;

    padding: 0px;

}



</style>



<body>



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



</body>

</html>

**American horizo** · 03-02-2013 04:30 AM

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

**rtrethewey** · 03-03-2013 10:11 AM

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.

**brandonator** · 03-03-2013 11:27 AM

html, body {height:100%;width:100%;overflow:hidden}
</body>
</html>

**American horizo** · 03-04-2013 02:59 AM

Originally Posted by rtrethewey

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: Setting 100% width for an element, it doesn't consider the scrollbar

Thread Tools

Display

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

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions