logo标签列表

100%宽度比屏幕尺寸大。

htmlcss
5
我有一个 div，它是 body 的直接子元素，具有 "witdh: 100%" 属性。但它比实际屏幕尺寸要大。当然，body 和 html 标签也都有 "width: 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>

谢谢！

4个回答
2

将您的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;
}
2

正如其他人所说，是盒模型将宽度推到超出声明的宽度。由于您的元素是绝对定位的，而不是使用width: 100%，您可以使用left: 0; right: 0;，项目将在没有声明宽度或填充将框模型推至超过100％的情况下，在响应式布局中跨越100％宽度。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.disabled {
 opacity: 0.2;
}

.disabled:hover {
 background-color: inherit;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<body>
  <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>
 </body>

2
将#main-wrapper添加box-sizing: border-box; - 这样就可以解决问题了。 #main-wrapper的宽度为100％加上15像素的填充，这超过了100％。 box-sizing: border-box;将填充包括在宽度中。

https://jsfiddle.net/tx9wLb40/

0

您遇到的问题是因为默认情况下，浏览器在计算 width 时不考虑 border 和 padding 的值。因此，它会将值呈现为您给定的值 100% 加上任何 padding 和 border 的值。

要解决这个问题，请在 #main-wrapper 中添加 box-sizing: border-box。这将确保在计算 width 时包括 padding 和 border 的值。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接