调整大小时CSS布局

我有以下代码：

body {
	/* Background */
	width: 900px;
	height: 900px;
	border: 1px solid black;
	
	/* Font */
	font-family: "arial";
	font-size: 12px;
	color: #000000;
}

<!DOCTYPE html>
<html>
	<head>
		<link rel = "stylesheet" type = "text/css" href = "stylesheet.css">
		<meta name = "author" content = "Afik Atashga" />
		<meta name = "description" content = "Website" />
		<meta name = "keywords" content = "Website, Afik Atashga" />
		<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
		<title>Website.</title>
	</head>
	<body>
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text
	</body>
</html>
/* HTML Tags */ 
html {
	direction: ltr;
	background-color: #ededed;
	width: 100%;
	height: 100%;
}

当我调整窗口大小时，内容不在边界。我如何保持相对的变化，以免离开边界？

您可以将width: 100%与max-width: 900px;结合使用。这样，您的body不会比900px大，但会适应小于900px的视口尺寸。

也使用box-sizing: border-box;-这将包括边框宽度到您指定的宽度。这样，您的元素就不会比指定的要大。我建议阅读有关CSS框型号的信息。

body {
  /* Background */
  width: 100%; /* <-- adapt to viewport width */
  max-width: 900px; /* <-- width not larger than 900px */
  height: 900px;
  border: 1px solid black;
  margin: 0;
  box-sizing: border-box; /* <-- include border into width declaration */
  margin: 0 auto; /* <-- center body */
  /* Font */
  font-family: "arial";
  font-size: 12px;
  color: #000000;
}

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

有关更多信息，请参见有关max-width的MDN。

尝试使用此CSS：

          body {
          /* Background */
          max-width: 900px;
          width: 100%;
          height: 900px;
          border: 1px solid black;
          /* Font */
          font-family: "arial";
          font-size: 12px;
          color: #000000;
      }

body {
	/* Background */
	width: 100%;
	height: 900px;
  max-width:900px;
	border: 1px solid black;
	
	/* Font */
	font-family: "arial";
	font-size: 12px;
	color: #000000;
}

<!DOCTYPE html>
<html>
	<head>
		<link rel = "stylesheet" type = "text/css" href = "stylesheet.css">
		<meta name = "author" content = "Afik Atashga" />
		<meta name = "description" content = "Website" />
		<meta name = "keywords" content = "Website, Afik Atashga" />
		<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
		<title>Website.</title>
	</head>
	<body>
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text
	</body>
</html>
/* HTML Tags */ 
html {
	direction: ltr;
	background-color: #ededed;
	width: 100%;
	height: 100%;
}

相关内容

最新更新

热门标签：