限制桌面上网页的大小调整和缩放

Question

我有一个HTML / PHP / JavaScript文档，我在调整和缩放部分时遇到了问题。我希望一切都能充当Stack Overlow的网站行为。因此，每当我调整浏览器大小时，所有内容都停留在同一个位置，并且不会移动并更改其格式。

为了实现这一目标，我可以在代码中添加什么？

Answer 1

简单，在网站的容器元素上设置宽度。无论您是针对单个元素还是多个元素执行此操作，都将取决于您网站的设计和要求。

示例：

单个容器

＆＃13;

＆＃13;

header,
footer {
  min-height: 150px;
}
main {
  min-height: 400px;
  background-color: #eee;
}
.container {
  margin: 0 auto;
  width: 1060px;
}

＆＃13;

<div class="container">
  <header>
    Header
  </header>
  <main>
    Content
  </main>
  <footer>
    Footer
  </footer>
</div>

＆＃13;

＆＃13;

＆＃13;

多个容器

＆＃13;

＆＃13;

header,
main,
footer {
  margin: 0 auto;
  width: 1060px;
  min-height: 150px;
}
main {
  min-height: 400px;
  background-color: #eee;
}

＆＃13;

<header>
  Header
</header>
<main>
  Content
</main>
<footer>
  Footer
</footer>

＆＃13;

＆＃13;

＆＃13;