Question

我有一个包含代码的页面，如下所示。我的问题是它由于右边有额外的空间而一直滚动到一边。我已经将html的设置设置为100％，将主体的宽度设置为1280px，如下所示，我还将最大div的宽度设置为100％。

我正在使用ejs模板在for循环中输出一些图片。

html {
  height: 100%;
  width:100%;
  margin:0;
  box-sizing: border-box;
}

body{
	margin:0 auto;
   	/*padding:100;*/
   	height:100%;
   	width:1280px;
	background-color: #F8F8FF;
}

#content{
	overflow: auto;
	padding:10px;
	padding-bottom: 180px;
	width:100%;
}

#container{
	position: relative;
	min-height: 100%;
	width:100%;
}

<div id="navbar">
	<%= include navbar %>
</div>

<div id="content">

	<h2><%= photographer_name %></h2>

	<% for(var i=0; i < stock.length; i++) { %>
		<div class="col-sm-6 col-md-3" id="photo_div">

				<div style="height:300px" class="thumbnail">
					<img height="100%" src="/images/<%=profile[i].image_name%>">
				</div>

		   		<div class="caption">
			    	<h3><%= profile[i].product_name %></h3>
			    </div>

		</div>
	<% } %>

</div>

有人可以解释为什么我在右边获得空间吗？

Answer 1

2件事会导致你的CSS出现水平滚动条。如果浏览器是> 1280px，没有水平滚动。但是，如果浏览器是＆lt;因为默认的盒子模型和body { width:1280px; }填充，因为#content和100%将是20px + 10px宽，因此会有一个水平滚动条。

要解决此问题，我会将body更改为max-width: 1280px（因此，当视口为＆lt; 100%时，宽度将为1280px并添加box-sizing: border-box; } #content

Answer 2

padding应用于元素的内部。在您的示例中，这意味着#content的宽度实际上是100％+ 20px（1300px），这会导致滚动条出现。

width和#content不一定要求{p> #container（取决于您的内容）

    html {
  height: 100%;
  width:100%;
  margin:0;
  box-sizing: border-box;
}

body{
	margin:0 auto;
   	
   	height:100%;
   /*	width:1280px; removed for the SO snippet to show difference */
	background-color: #F8F8FF;
}

#content{
	overflow: auto;
	padding:10px;
	padding-bottom: 180px;
	/* Removed the width */
}

#container{
	position: relative;
	min-height: 100%;
	/* Removed the width */
}

<div id="navbar">
	<%= include navbar %>
</div>

<div id="content">

	<h2><%= photographer_name %></h2>

	<% for(var i=0; i < stock.length; i++) { %>
		<div class="col-sm-6 col-md-3" id="photo_div">

				<div style="height:300px" class="thumbnail">
					<img height="100%" src="/images/<%=profile[i].image_name%>">
				</div>

		   		<div class="caption">
			    	<h3><%= profile[i].product_name %></h3>
			    </div>

		</div>
	<% } %>

</div>

这样可以保持填充，但不会导致宽度+填充+边距的增加超过100％。

页面滚动左右

2 个答案: