HTML body width: 适合页面，但有最大值

Question

如何使网页适合浏览器宽度的大小，同时我仍然有正文的最大宽度（例如，width="1000px"）？

提前致谢。

Answer 1

您可以使用 vw 和 vh 属性 (w3schools) 设置内容以匹配浏览器视口的大小。

如果您说您希望正文的 max-width 为 1000 像素，但如果 vw < 1000 是可滚动的，则可能应该将其放置在某种子元素中：

HTML:

<body class="viewport"> <div class="my_element"></div> </body>

CSS:

.viewport { height: 100vh; width: 100vh; }

.my_element { max-width: 1000px; }

Answer 2

下面的代码会做的是，直到 body 宽度达到 1000px 时，它将占据浏览器的整个宽度，超过 1000px 后，它停止增加 body 宽度

body {
  padding: 0;
  margin: 0;
  max-width: 1000px;
  margin: 0 auto;
}
div {
  background-color: #000;
  height: 20px;
}

<div></div>

HTML body width: fitting page, but with maximum value