CSS 调整大小时的布局

Question

我有以下代码：

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

当我调整 window 大小时，内容超出了边界。我怎样才能保持变化的相对性，使其不会离开边界？

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.

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

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

Answer 3

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

CSS 调整大小时的布局

CSS layout when resize

html

css

layout

resize

border