宽度100％大于屏幕尺寸

我有一个div，它是直接具有“witdh: 100%”身体的孩子。但它大于真实的屏幕尺寸。 body和html标签当然也有“width 100%”。任何想法？宽度100％大于屏幕尺寸

代码：Fiddle

<div id="main-wrapper"> 
    <div id="text"></div> 
    <div id="controlButtons"> 
     <div id="left-button" class="disabled"> 
      <div id="triangle-left"></div> 
      <button class="previous-button button">Pr&eacute;c&eacute;dent</button> 
     </div> 
     <div id="page-number-display"><span id="page-number"></span>/8</div> 
     <div id="right-button"> 
      <button class="next-button button">Suivant</button> 
      <div id="triangle-right"></div> 
     </div> 
    </div> 
</div>

谢谢！

来源

2017-03-01 Ilwan

添加box-sizing: border-box;到#main-wrapper时padding和border值将包括 - 修复它。

#main-wrapper有100％宽度PLUS 15px填充，这是超过100％。 box-sizing: border-box;包含宽度中的填充。

https://jsfiddle.net/tx9wLb40/

来源

2017-03-02 00:22:32 Johannes

改变风格为您main-wrapper ID到：

#main-wrapper { 
    width: 100%; 
    position: absolute; 
    top: 150px; 
    left: 0px; 
    background-color: #848484; 
    padding: 15px; 
    border-radius: 10px; 
    box-sizing: border-box; 
}

来源

2017-03-01 20:47:42 Masoud

正如其他人所说，它的盒模型推动的宽度超出声明宽度。由于您的元素是绝对定位的，因此您可以使用left: 0; right: 0;而不是使用width: 100%，因为该项目可以响应100％宽度，而无需声明宽度或填充将盒子模型推到100％以上。发生

html, 
 
body { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
} 
 

 
html { 
 
\t background-color: #1C1C1C; 
 
} 
 
body { 
 
\t font-family: "Arial"; 
 
\t -webkit-user-select: none; 
 
\t -moz-user-select: none; 
 
\t  -ms-user-select: none; 
 
\t   user-select: none; 
 
} 
 

 
#controlButtons { 
 
\t display: flex; 
 
\t justify-content: space-around; 
 
} 
 

 
.button { 
 
\t height: 35px; 
 
\t width: 85px; 
 
\t background-color: #1C1C1C; 
 
\t font-weight: 600; 
 
\t color: lightgrey; 
 
\t border:none; 
 
\t cursor: pointer; 
 
\t outline: none; 
 
} 
 

 
.next-button { 
 
\t border-top-left-radius: 5px; 
 
\t border-bottom-left-radius: 5px; 
 
} 
 

 
.previous-button { 
 
\t border-top-right-radius: 5px; 
 
\t border-bottom-right-radius: 5px; 
 
} 
 
#triangle-right { 
 
\t position: relative; 
 
\t left: -3px; 
 
\t top: 0.45px; 
 
\t background-color: #1C1C1C; 
 
\t text-align: left; 
 
\t display: inline-block; 
 
\t cursor: pointer; 
 
} 
 

 
#triangle-right:before, 
 
#triangle-right:after { 
 
\t content: ""; 
 
\t position: absolute; 
 
\t background-color: inherit; 
 
} 
 

 
#triangle-right, 
 
#triangle-right:before, 
 
#triangle-right:after { 
 
\t width: 1.178em; 
 
\t height: 1.178em; 
 
\t border-top-right-radius: 20%; 
 
} 
 

 
#triangle-right { 
 
\t transform: rotate(-90deg) skewX(-30deg) scale(1,.866); 
 
} 
 

 
#triangle-right:before { 
 
\t transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%); 
 
} 
 

 
#triangle-right:after { 
 
\t transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%); 
 
} 
 

 
#triangle-left { 
 
\t position: relative; 
 
\t right: -3px; 
 
\t top: 0.45px; 
 
\t background-color: #1C1C1C; 
 
\t text-align: left; 
 
\t display: inline-block; 
 
\t cursor: pointer; 
 
} 
 

 
#triangle-left:before, 
 
#triangle-left:after { 
 
\t content: ""; 
 
\t position: absolute; 
 
\t background-color: inherit; 
 
} 
 

 
#triangle-left, 
 
#triangle-left:before, 
 
#triangle-left:after { 
 
\t width: 1.178em; 
 
\t height: 1.178em; 
 
\t border-top-right-radius: 20%; 
 
} 
 

 
#triangle-left { 
 
\t transform: rotate(-30deg) skewX(-30deg) scale(1,.866); 
 
} 
 

 
#triangle-left:before { 
 
\t transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%); 
 
} 
 

 
#triangle-left:after { 
 
\t transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%); 
 
} 
 

 
#main-wrapper { 
 
\t position: absolute; 
 
\t top: 150px; 
 
\t left: 0; 
 
    right: 0; 
 
\t background-color: #848484; 
 
\t padding: 15px; 
 
\t border-radius: 10px; 
 
} 
 

 
.disabled { 
 
\t opacity: 0.2; 
 
} 
 

 
.disabled:hover { 
 
\t background-color: inherit; 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<body> 
 
\t \t <div id="main-wrapper"> 
 
\t \t \t <div id="text"></div> 
 
\t \t \t <div id="controlButtons"> 
 
\t \t \t \t <div id="left-button" class="disabled"> 
 
\t \t \t \t \t <div id="triangle-left"></div><button class="previous-button button">Pr&eacute;c&eacute;dent</button> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="page-number-display"><span id="page-number"></span>/8</div> 
 
\t \t \t \t <div id="right-button"> 
 
\t \t \t \t \t <button class="next-button button">Suivant</button><div id="triangle-right"></div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </body>

来源

2017-03-01 21:14:07

你的问题，因为你的浏览器，默认情况下，不计算width时考虑的border和padding帐户值。因此它会将其呈现为您给出的值，100%，以及任何padding和border值。

要解决此问题，请将box-sizing: border-box添加到#main-wrapper。这将确保计算width

来源

2017-03-01 21:28:48

宽度100％大于屏幕尺寸

回答

相关问题