Question

我有以下代码：

＆＃13;

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

＆＃13;

<!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%;
}

＆＃13;

当我调整窗口大小时，内容超出边界。我如何保持相对变化，以便它不会离开边界？

Answer 1

试试这个css：

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

Answer 2

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

同样使用box-sizing: border-box; - 这将包括指定宽度的边框宽度。这样，您的元素不会变得比指定的大。我建议read about the CSS box model。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

有关详细信息，请参阅MDN about max-width。

Answer 3

＆＃13;

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

＆＃13;

<!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%;
}

＆＃13;

调整大小时的CSS布局

3 个答案: