Question

我有一个div，它是身体的直接孩子，具有＆＃34; witdh: 100%＆＃34;。但它比实际屏幕尺寸大。当然body和html标签也有＆＃34; width 100%＆＃34;。有什么想法吗？

代码：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>

谢谢！

Answer 1

将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;
}

Answer 2

正如其他人所说，它是推动宽度超出声明宽度的盒子模型。而不是使用width: 100%，因为您的元素是绝对定位的，您可以使用left: 0; right: 0;，并且该项目将响应地跨越100％宽度，而不必声明宽度或您的填充推动框模型超过100％。

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 3

出现此问题的原因是，在计算padding时，默认情况下，您的浏览器不会考虑width和100%的值。因此，它会将其呈现为您提供的值padding，以及任何border和box-sizing: border-box值。

要解决此问题，请将#main-wrapper添加到padding。这将确保在计算border

时包含width和onsubmit="return false"值

Answer 4

将box-sizing: border-box;添加到#main-wrapper - 修复了它。

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

https://jsfiddle.net/tx9wLb40/

宽度100％大于屏幕尺寸

4 个答案: