CODEWITHSUNDEEP
htmlcss
Charles Watson
Charles Watson

Reputation: 1075

Div on my site has 100% width but is not as wide as the body?

My site has a div that scrolls up the page. It fills 100% of the screen, but for some reason there is a slight bit of horizontal scroll available and the background extends that extra bit.

I am attempting to get the div to match the width of the screen/background without any horizontal scrolling available. It is on the far right that the issue takes place.

enter image description here

HTML:

<body>
    <div class="summaryPanel">
        <p>Summary</p>
    </div>
</body>

CSS:

body {
    position: relative;
    background-image: url(../images/trees.jpeg);
    background-color: white;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    z-index: -2;
}

.summaryPanel {
    position: absolute;
    top: 10vh;
    z-index: -1;
    height: 100vh;
    width: 100vw;     // I also tried "100%"
    background-color: #242A31;
    border-top: 3px solid rgb(74, 74, 74);
}

Upvotes: 0

Views: 90

Answers (4)

Rameez Rami
Rameez Rami

Reputation: 5728

I hope this helps.

Add to body tag

body{
    overflow-x: hidden;
}

Upvotes: 0

Anand Singh
Anand Singh

Reputation: 2363

I have not tested this but I think this will solve your problem... 

 body 
       {
          margin: 0;
          padding: 0;
          width:100%;//if needed
          height:100%;//if needed
       }
       #divID
       {
         margin: 0;
         width: 100%;
         height: 100%
         background-color: red;//for test
       }

100% is 100% of its parent, More Info here

Upvotes: 0

kushal kant
kushal kant

Reputation: 450

You should try like this. Add a new class (wrapper) in place of body

*{margin:0;padding:0}
.wrapper {
    position: fixed;
    background-image: url(../images/trees.jpeg);
    background-color: white;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    z-index: -2;
}
.summaryPanel {
    position: relative;
    top: 10vh;
    z-index: -1;
    height: 90vh;
    width: 100vw;
    background-color: #242A31;
    border-top: 3px solid rgb(74, 74, 74);
}
<div class="wrapper">
 <div class="summaryPanel">
        <p>Summary</p>
    </div>
</div>

I hope it will helps you.

Upvotes: 3

Domain
Domain

Reputation: 11808

$(document).ready(function(){
$(".summaryPanel").height($(window).height());
$(".summaryPanel").width($(window).width());
});

use jQuery to set the width and height of the div

Upvotes: 0

Related Questions