Background CSS 100% Width Horizontal Scroll Issue

width 100% causes horizontal scrollbar

Vertical scrollbars are included in vw units.

So when there's a vertical scrollbar, 100vw is wider than the viewport (without scrollbars).

One suggestion is to change #modalcontainer to width:100% instead of width:100vw.

@keyframes modalAnimation {  from {    top: 90vh;  }  to {    top: 95vh;    background-color: darkcyan;    box-shadow: 5px 5px 25px #747474;  }}
#headerImage {  width: 100vw;  height: 100vh;  overflow: hidden;  position: fixed;  padding: 0px;  margin: 0px;  z-index: -10000000;}
#main-nav>li {  width: 9vw;  height: 7vh;  color: #ffffff;  float: right;  text-align: center;  line-height: 7vh;  margin: 0px;  font-size: medium;  z-index: 100;  list-style-type: none;  transition: 0.25s;}
#main-nav {  background-color: rgba(245, 255, 249, 0.5);  width: 50%;  height: 7vh;  position: fixed;  z-index: 100;  float: right;  transition: all 0.25s;}

/*#main-nav:hover {    background-color: rgba(0,129,129,1);} */
#main-nav>li:hover {  background-color: rgb(232, 255, 92);}
#wall {  background-color: #d2d2d2;  width: 50%;  height: 100vh;  z-index: -10;}
* {  margin: 0px;  padding: 0px;}
#main-nav>li>a {  color: #000;  text-decoration: none;}
.modalLayout {  opacity: 0;}
.modalLayout:target {  position: fixed;  background-color: rgba(0, 0, 0, 0.5);  width: 100vw;  height: 100vh;  opacity: 1;  transition: all 0.4s;  z-index: 200;}
.modal {  text-align: center;  padding: 6% 1% 1.7% 1%;  width: 30vw;  height: 20vh;  margin: 30vh 35vw;  background-color: crimson;  position: fixed;  transition: all 0.4s;  z-index: 10;  border-radius: 10px;  box-shadow: 2px 2px #484848;}
.closeBtn {  font-size: 35px;  position: absolute;  top: 25vh;  right: 33vw;  float: right;  color: #fff;  font-weight: bold;  text-decoration: none;  z-index: 1000;  cursor: pointer;  margin-right: 5px;  transition: all 0.4s;}
.mainPageButton>div {  display: none;}
.mainPageButton:hover>div {  display: block;  transition: all 0.25s;}
.mainPageButton>div>div {  width: 15vw;  height: 8vh;  background-color: #d2d2d2;  color: #000;  font-size: medium;  float: top;  border-bottom: black 1px solid;  list-style-type: none;  position: relative;  line-height: 8vh;}
.mainPageButton>div>div>a {  text-decoration: none;  color: #fff;  font-size: medium;  text-align: center;  list-style-type: none;  background-color: #d2d2d2;  padding-right: 2px;}
.mainMenu {  position: absolute;  top: 88vh;  z-index: 0;  margin-right: 1vw;}
.mainMenu>div {  width: 15vw;  height: 10vh;  border-bottom: black solid 2px;  margin-bottom: 3vh;  background-color: white;  transition: all .3s;  text-align: center;  line-height: 10vh;}
.mainMenu>div:hover {  width: 17vw;  height: 12vh;  background-color: #ffcfce;}
.mainMenu>div>a {  font-size: x-large;  color: #000;  cursor: pointer;  text-decoration: none;}
.about {  width: 20vw;  height: 40vh;  background-color: #94ffca;  border-radius: 5px;  position: absolute;  top: 88vh;  left: 0;  float: left;  font-size: larger;  padding: 1vw;  transition: all 0.3s;  margin-left: 4px;  overflow: auto;}
.about:hover {  transform: translate(5px);  background-color: rgba(148, 255, 202, 0.5);}
#modalcontainer {  background-color: rgba(256, 256, 256, 0.75);  top: 80vh;  position: absolute;  width: 100%;  height: 200%;  z-index: -10;  border-top-left-radius: 50px;  border-top-right-radius: 50px;}
#modalswall {  width: 50vw;  height: 150vh;  background-color: #0d213c;  position: absolute;  top: 85vh;  right: 20vw;  z-index: -5;  border-radius: 8px;  box-shadow: 20px 20px 25px grey;  filter: opacity(90%);}
.bodyModals {  background-color: #acd7ff;  top: 90vh;  width: 35vw;  height: 25vh;  right: 28vw;  position: relative;  z-index: 5;  border-radius: 10px;  transition: all .5s;  margin-bottom: 10vh;}
.bodyModals:hover {  -webkit-animation: modalAnimation;  -webkit-animation-duration: 3s;  -webkit-animation-direction: alternate;  -webkit-animation-iteration-count: infinite;}
.bodyModals>p {  padding: 1vw;  font-size: large;}
#wrapper {  margin-bottom: 170vh;  position: relative;}
#footer {  position: relative;  width: 50vw;  min-height: 25vh;  bottom: 0;  background-color: #0d213c;}
#footer>p {  font-size: large;  text-align: center;  color: #fff;  padding: 10px 0px;}
html,body {  height: 100%;  margin: 0;  padding: 0;}

<ul id="main-nav">  <li class="mainPageButton">    <a href="#mainPageDropdownMenu"> </a>    <div>      <div>        <a href="#"> </a>      </div>
      <div>        <a href="#"> </a>      </div>      <div>        <a href="#"> </a>      </div>
      <div>        <a href=""> </a>      </div>    </div>  </li>  <li>    <a href="#aboutMe"> </a>  </li>  <li>    <a href="#contactUS"> </a>  </li></ul>

<img src="http://ghmahdi.ir/wp-content/uploads/header.jpg" id="headerImage">
<div id="wrapper">  <div id="aboutMe" class="modalLayout">    <div>      <a href="#" class="closeBtn"> × </a>    </div>    <div class="modal"></div>  </div>
  <div id="contactUS" class="modalLayout">    <div>      <a href="#" class="closeBtn"> × </a>    </div>    <div class="modal"></div>  </div>
  <div class="mainMenu">    <div> <a href="#aboutModal"></a></div>    <div><a href=""></a></div>    <div><a href=""></a></div>    <div><a href=""></a></div>  </div>
  <div class="about"></div>  <div id="modalswall"></div>  <div class="bodyModals"> </div>  <div class="bodyModals"></div>  <div class="bodyModals"></div>  <div id="modalcontainer">  </div></div>
<div id="footer"></div>

CSS footer width:100% causes horizontal scroll

As @Lal mentioned the problem is caused by the left padding on .footer.

I'm assuming this padding is a necessary part of your design so a better solution would be to set the box-sizing property of your footer to border-box:

.footer {
    padding-left:5% 
    box-sizing: border-box;
}

DEMO

---

Edit

Ok try this:

DEMO

.footer {
   padding-left:5%;
   margin: 0;
}

horizontal scroll bar with 100% width

Add white-space: nowrap to .scroll ul

.scroll {overflow:auto; }
.scroll ul{ white-space: nowrap;}
.scroll li {display: inline-block;}

JS Fiddle: http://jsfiddle.net/f6CRt/

Content width 100% showing horizontal scrollbar

You use width: 92% and left: 50px.

At about a window width of 600px, the content will be 600*0.92 = 552px width. Add the left position of 50px to it, and the total width is 602px. Which is wider that you window width.

So instead of using left: 50px, use left: 4%

DEMO

Horizontal Scroll Bar Appears - Even Div's Width=100%

Solution Obtained:


The Problem is, i Forgot to specify the border attribute for Body

    body{ margin:0; padding:0; border:0;}

Now its Fine, The H and V scroll bar Got Vanished.
Any way Thank you guys for your timely response.

Prevent 100vw from creating horizontal scroll

Basically the answer is no, if you have a vertical scrollbar there is no way to make 100vw equal the width of the visible viewport. Here are the solutions that I have found for this issue.

warning: I have not tested these solutions for browser support

---

tl;dr

If you need an element to be 100% width of the visible viewport(viewport minus scrollbar) you will need to set it to 100% of the body. You can't do it with vw units if there is a vertical scrollbar.

---

1. Set all ancestor elements to position static

If you make sure that all of .box's ancestors are set to position: static; then set .box to width: 100%; so it will be 100% of the body's width. This is not always possible though. Sometimes you need one of the ancestors to be position: absolute; or position: relative;.

Example

2. Move the element outside of non-static ancestors

If you can't set the ancestor elements to position: static; you will need to move .box outside of them. This will allow you to set the element to 100% of the body width.

Example

3. Remove Vertical Scrollbar

If you don't need vertical scrolling you can just remove the vertical scrollbar by setting the <html> element to overflow-y: hidden;.

Example

4. Remove Horizontal Scrollbar
This does not fix the problem, but may be suitable for some situations.

Setting the <html> element to overflow-y: scroll; overflow-x: hidden; will prevent the horizontal scrollbar from appearing, but the 100vw element will still overflow.

Example

Viewport-Percentage Lengths Spec

The viewport-percentage lengths are relative to the size of the
initial containing block. When the height or width of the initial
containing block is changed, they are scaled accordingly. However,
when the value of overflow on the root element is auto, any scroll
bars are assumed not to exist. Note that the initial containing
block’s size is affected by the presence of scrollbars on the
viewport.

It appears that there is a bug because vw units should only include the scrollbar width when overflow is set to auto on the root element. But I've tried setting the root element to overflow: scroll; and it did not change.

Example

---

Related Topics