时间戳

首页 > 解决方案 > 调整浏览器大小时，Div 不让 100% 的宽度

html - 调整浏览器大小时，Div 不让 100% 的宽度

问题描述

我记得它曾经在我将宽度设置为 100% 时工作，一旦从桌面到平板电脑再到移动设备的某些像素调整大小。只是不知道为什么我的这次因为某种原因不能工作。在调整像素大小时，尝试将页眉、内容和页脚设为 100% 的宽度。

仅供参考，还没有到页脚。

*. {
	width: 100%;
}

body {
	font-family: Andale Mono, monospace;
}

p {
	font-size: 24px;
}

.header {
	padding: 200px;
	text-align: center;
	background-color: #001f4d;
}

.header h1 {
	font-size: 64px;
	color: white;
}

.header p {
	color: white;
}

/* Begin main-content */

.content {
	background: #0d0d0d;
	padding: 80px;
	color: white;
}

#main-title {
	text-align: center;
	font-size: 36px;
}

#main-paragraph {
	margin: 400px;
	max-width: 1000px;
	margin: auto;
}

.column {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}



/* Small devices (portrait tablets and large phones, 600px and up) */

@media screen and (max-width: 600px) {
	.header {
		width: 100%;
	}

	.content {
		width: 100%;
	}

	#main-paragraph {
		width: 100%;
	}

	.column {
    width: 100%;
  }
}
<!DOCTYPE html>
<html>
<head>
	<title>Doug Cannon's Biography</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<div class="header">
		<h1>My Website</h1>
		<p>Welcome to my website.</p>
	</div>

	<div class="content">


		<h2 id="main-title">About Me</h2>
		<p id="main-paragraph">Mollit officia quis officia nostrud culpa ad sunt quis nulla quis esse adipisicing ut. Ullamco mollit ad elit reprehenderit mollit in duis incididunt id sit laboris adipisicing nisi pariatur. Lorem ipsum ea ut qui in ea consectetur id adipisicing quis officia occaecat laboris id velit. Sunt ea irure ex nostrud elit enim dolor in ut anim cillum ad duis.</p>

		<br><br><br>


		<!-- Responsive column cards -->

		<div class="row">

			  <div class="column" style="background-color:#aaa;">
			    <h2>Column 1</h2>
			    <p>Some text..</p>
			  </div>

			  <div class="column" style="background-color:#bbb;">
			    <h2>Column 2</h2>
			    <p>Some text..</p>
			  </div>

			  <div class="column" style="background-color:#ccc;">
			    <h2>Column 3</h2>
			    <p>Some text..</p>
			  </div>

		</div>



	</div> <!-- End main-content -->

	<div class="footer">
		<footer>
	      Douglas Cannon <span class="highlight">&copy; 2019</span>
	    </footer>
	</div>

</body>
</html>

标签： htmlcssresponsive-designmedia-queries

解决方案

我看到这里发生了什么！

您的标题有200px的填充，内容有80px。当窗口的宽度在600px以上时，content 和 header 的auto宽度是 ，所以是它们的容器宽度 ( <body>)减去200px/80px 的 padding，因为 padding 在宽度的外面，所以它们被填满窗户的宽度很好！

然后当窗口大小低于 600px 时，标题和内容的宽度设置为容器的 100%，但是 200px/80px 的填充在这个 100%之外，所以元素占用了更多的空间！如果您将 设置box-sizing为border-box，则填充将放在内部，并且当窗口宽度发生变化时您看不到任何变化。

我认为您想要做的是减少填充而不是使宽度为 100%，以使内容更宽！此外，您可能想要对 8px 的边距做一些事情<body>，因为这就是整个页面周围存在间隙的原因。

我希望我做对了:)

推荐阅读