寬度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％大於屏幕尺寸

回答

相關問題