CODEWITHSUNDEEP
htmlcss
user2952267
user2952267

Reputation: 79

Vertical scroll bar remove

Why div's are overflowing.I am getting vertical scroll bar.Some one please explain clearly where I did mistake.

If I remove any of the comment its working fine. 

 * {
            padding: 0px;
            margin: 0px;
           box-sizing: border-box;
    }
body, html {
        height: 100%;
        width: 100%;
        position: relative;
        display: block;
       /*overflow: hidden;*/

}
#box {
        position: relative;
        width: 9%;
        height: 9%;
        background-color: #000;
        margin: 1% 1%;
        position: relative;
       /*float: left;*/

}

html code

<html>
        <body>
                <div id="box"></div>
        </body>
</html>

Upvotes: 1

Views: 72

Answers (4)

xaddict
xaddict

Reputation: 1328

UPDATE: after reading your question again and checking out the provided code the problem you are actually facing is that the div forces the body to get bigger than 100%.

This is because a non-floated block element (div, h1, etc.) that is the first element of its parent forces its margin outside the parent's boundaries. It's a common thing seen with H1 tags inside divs that force their top-margin to be outside the wrapping div. This is called collapsing margins and a detailed explanation and workarounds can be found here: Collapsing Margins

Basically a floated, display:block would take care of the issue, or use position:relative; along with top:1em;left:1em;

ORIGINAL ANSWER:

When you have a div with a set height and/or width (as is the case in your example) and you put text, images or other elements in there that are bigger than the div, an overflow will occur. So the solution is to either:

  1. Put less content in the div
  2. Don't make it a set height/width
  3. use overflow:hidden;, overflow:auto; or overflow:scroll; to force the scrollbar behavior.

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

That is happening due to collapsing margins

A trick is to add some empty content in the :before/:after of the container (body in this case)

body:before,
body:after{
        content:'';
        display:block;
        height:0;
        width:0;
        overflow:hidden;
}

Full working Demo:

* {
            padding: 0px;
            margin: 0px;
           box-sizing: border-box;
    }
body, html {
        height: 100%;
        width: 100%;
        position: relative;
        display: block;
}
body:before,
body:after{
        content:'';
        display:block;
        height:0;
        width:0;
        overflow:hidden;
}
#box {
        position: relative;
        width: 9%;
        height: 9%;
        background-color: #000;
        margin: 1% 1%;
        position: relative;
}
<div id="box"></div>

Upvotes: 3

ketan
ketan

Reputation: 19341

It's beacuse you give margin: 1% 1%;. Just remove it. Then it will solve your issue.

* {
            padding: 0px;
            margin: 0px;
           box-sizing: border-box;
    }
body, html {
        height: 100%;
        width: 100%;
        position: relative;
        display: block;
}
#box {
        position: relative;
        width: 9%;
        height: 9%;
        background-color: #000;
        margin: 1% 1%;
        position: relative;

}

Check Fiddle

Upvotes: 0

Daniel Apt
Daniel Apt

Reputation: 2638

If the element's contents are larger than the element's size, it will show a scroll-bar.

To change this use:

#box {
    overflow:hidden;
}

Upvotes: -1

Related Questions