Question

我正面临着问题。我的页面看起来不像我期待的那样。

*{margin:0; padding:0;}
.width{width:980px;margin:0 auto;}
.header{width:100%;background-color:#ffffbb;}
.leftpanel{float:left;height:50px;}
.rightpanel{float:right;height:50px;}
.clear{clear:both;}
h2{font-size:32px;}

	<!-- HEADER AREA -->
	<div class="header">
		<div class="width">
			<div class="leftpanel">
				<h2>This is first sentence</h2>
			</div>
			<div class="rightpanel">
				<h2>This is second sentence</h2>
			</div>	
			<div class="clear"></div>
		</div>
	</div>

在窗口上最小化我的标题颜色正在缩小并且不覆盖内容的整个宽度。怎么解决？我尝试使用max-width：980px;但这会在最小化浏览器时折叠内容。我希望底部滚动覆盖整个宽度，而不会折叠内容和背景颜色来修复。

Answer 1

我看到你做错了什么。基本上，您的标题仅扩展到100％的宽度，即视口的100％。当您将屏幕缩小超过980px时，如.width元素所示，您的某些内容会从视口中移出，从而延伸到标题之外。您可以做很多事情来解决这个问题，一个非常快速的解决方法是在标题中添加一个浮点数并将其最小宽度设置为100％。 e.g。

*{margin:0; padding:0;}
.width{width:980px;margin:0 auto;}
.header{min-width:100%;float:left;background-color:#ffffbb;}
.leftpanel{float:left;height:50px;}
.rightpanel{float:right;height:50px;}
.clear{clear:both;}
h2{font-size:32px;}

	<!-- HEADER AREA -->
	<div class="header">
		<div class="width">
			<div class="leftpanel">
				<h2>This is first sentence</h2>
			</div>
			<div class="rightpanel">
				<h2>This is second sentence</h2>
			</div>	
			<div class="clear"></div>
		</div>
	</div>

Answer 2

这是因为你给元素赋予了固定的宽度。使用以下Css，您的问题将得到解决：

*{margin:0; padding:0;}
.width{width:100%;margin:0 auto;}
.header{width:100%;background-color:#ffffbb;}
.leftpanel{float:left;height:50%;}
.rightpanel{float:right;height:50%;}
.clear{clear:both;}
h2{font-size:32px;}

同时尝试阅读为什么不给出固定的宽度和高度，这有助于您更好地理解

背景颜色随着窗口调整大小而缩小

2 个答案: