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

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

我知道你做错了什么。基本上，您的 header 仅延伸到 100% 的宽度，即视口(viewport)的 100%。当您将屏幕缩小超过 980px 时，如您的 .width 元素所示，您的一些内容会超出视口(viewport)，从而延伸到标题之外。你可以做很多事情来解决这个问题，一个真正快速的解决方法是向标题添加一个 float 并将其最小宽度设置为 100%。例如

*{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>