html - 网站不适合视口

Question

我在调整窗口大小（缩小）时遇到了一些问题。当我缩小它时，背景颜色不再停留在视口的边缘，内容超出了它。

我认为将width整个设置body为100%可以解决这个问题，但事实并非如此？

这是我当前代码的JSFiddle，用于索引页面和样式表：

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Segoe UI, helvetica, arial;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-size: 18px;
  width: 100%;
}

a {
  color: hsl(344, 69%, 70%);
  font-weight: bold;
}

a:hover {
  text-decoration: none;
  color: #67c3b2;
}

.menu-container {
  background-color: rgba(150, 150, 150, 0.2);
  padding: 20px 0;
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  width: 100%;
}

.menu {
  width: 90%;
  display: flex;
  top: 10px;
  justify-content: space-between;
  font-size: 16px;
  overflow: hidden;
  position: relative;
  left: 10px;
}

.header-container {
  background-color: rgba(150, 150, 150, 0.2);
  display: flex;
  justify-content: center;
  height: 30px;
  width: 100%;
  position: relative;
}

.logo {
  position: relative;
  bottom: 37px;
  z-index: 1;
}

.flex-container {
  display: flex;
  justify-content: center;
}

.flex-container p {
  position: relative;
  margin-left: 40px;
  margin-right: 40px;
  font-weight: bold;
  top: 40px;
  margin-top: 40px;
  text-align: center;
}

.main {
  display: flex;
  color: #464646;
  background: linear-gradient(to right, #77C9D4, #57BC90);
  flex: 1;
}

.cakelist {
  position: relative;
  bottom: 50px;
  display: flex;
  font-weight: bold;
  list-style-position: inside;
  margin-top: 130px;
}

.cakelist ol,
table {
  margin-left: 25px;
}

.cakelist h2 {
  margin-left: 25px;
  margin-top: 20px;
}

.carousel {
  color: #464646;
  top: 80px;
  position: relative;
  display: flex;
  justify-content: center;
  border: 3px outset gray;
  align-items: center;
  padding: 60px 60px 60px 60px;
}

.buttons {
  position: relative;
  width: 1600px;
  margin-right: 25px;
  justify-content: space-around;
  display: flex;
  top: 160px;
  text-align: center;
}

.button a:hover {
  opacity: 0.2;
}

.buttons p {
  margin-top: 20px;
}

.buttons img {
  padding-top: 25px;
  height: 200px;
}

.gallery {
  position: relative;
  top: 80px;
}

.pricing {
  display: flex;
  position: relative;
  top: 80px;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 140px;
}

.pricing p,
h1 {
  margin-left: 250px;
  text-align: left;
  margin-top: 5px;
}

.pricing span {
  opacity: 0;
  user-select: none;
}

.order {
  position: relative;
  border-radius: 5px;
  background: hsl(344, 69%, 70%);
  top: 20px;
  margin-top: 60px;
  padding: 5px;
}

#order-link {
  color: white;
  text-decoration: none;
}

.order-button {
  width: 180px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.footer-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: #9A9A9A;
  height: 90px;
  max-height: 90px;
}

.footer-logo {
  height: 80px;
  position: relative;
  right: 10px;
}

.subscribe {
  border-radius: 25px;
  background: hsl(344, 69%, 70%);
  padding: 5px 20px 5px 20px;
  width: 80px;
}

#subscribe-link {
  position: relative;
  color: white;
  text-decoration: none;
  right: 40px;
}

<div class="menu-container">
  <div class="menu">
    <div class="flex-item"><a href="about.html" target="_self">About Us</a></div>
    <div class="flex-item"><a href="cakes.html" target="_self">Cakes</a></div>
    <div class="flex-item"><a href="cupcakes.html" target="_self">Cupcakes</a></div>
    <div class="flex-item"><a href="gallery.html" target="_self">Gallery</a></div>
    <div class="flex-item"><a href="ordering.html" target="_self">Prices/Order</a></div>
    <div class="flex-item"><a href="search.html" target="_self">Search</a></div>
  </div>
</div>

<header class="header-container">
  <a href="index.html" target="_self"><img src="TCCLogo.png" class="logo" /></a>
</header>

<div class="flex-container main">

  <div class="container">
    <div class="carousel">
      Here is where I will have the quick gallery/carousel when I get to JS.
    </div>

    <div class="buttons">
      <div class="button">
        <a href="cakes.html"><img src="cake.png" /></a>
        <p>Check out our delicious cake options!</p>
      </div>
      <div class="button">
        <a href="cupcakes.html"><img src="cupcake.png" /></a>
        <p>Check out our delicious cupcake options!</p>
      </div>
      <div class="button">
        <a href="ordering.html"><img src="prices.png" /></a>
        <p>Check out our competitive pricing!</p>
      </div>
    </div>
  </div>
</div>

<footer class="footer-container">
  <a id="subscribe-link" target="_blank" href="#">
    <div class="subscribe">
      <p>Subscribe</p>
    </div>
  </a>
  <img src="TCCLogo.png" class="footer-logo" />
</footer>

我试过浏览我的样式表，将我用像素设置的任何东西的宽度更改为百分比，但它似乎没有解决它。唯一可行的事情是将主体位置更改为固定，但是如果缩小，则没有内容可以查看，它所修复的只是保持背景/页眉/页脚颜色相同。

我想也许我的编码有点混乱——我尽力做到可扩展，但是在这方面 100% 的新人让这变得困难。

标签： htmlcssflexbox

Answer 1

width:1600px您的问题是您.buttons只需将其删除并添加box-sizing:border-box到所有（伪）元素

编辑：

您还需要添加max-width:100%到.container和flex-wrap:wrap.buttons

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

body {
  font-family: Segoe UI, helvetica, arial;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-size: 18px;
}

a {
  color: hsl(344, 69%, 70%);
  font-weight: bold;
}

a:hover {
  text-decoration: none;
  color: #67c3b2;
}

.menu-container {
  background-color: rgba(150, 150, 150, 0.2);
  padding: 20px 0;
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  width: 100%;
}

.menu {
  width: 90%;
  display: flex;
  top: 10px;
  justify-content: space-between;
  font-size: 16px;
  overflow: hidden;
  position: relative;
  left: 10px;
}

.header-container {
  background-color: rgba(150, 150, 150, 0.2);
  display: flex;
  justify-content: center;
  height: 30px;
  width: 100%;
  position: relative;
}

.logo {
  position: relative;
  bottom: 37px;
  z-index: 1;
}

.flex-container {
  display: flex;
  justify-content: center;
}

.flex-container p {
  position: relative;
  margin-left: 40px;
  margin-right: 40px;
  font-weight: bold;
  top: 40px;
  margin-top: 40px;
  text-align: center;
}

.main {
  display: flex;
  color: #464646;
  background: linear-gradient(to right, #77C9D4, #57BC90);
  flex: 1;
}

.cakelist {
  position: relative;
  bottom: 50px;
  display: flex;
  font-weight: bold;
  list-style-position: inside;
  margin-top: 130px;
}

.cakelist ol,
table {
  margin-left: 25px;
}

.cakelist h2 {
  margin-left: 25px;
  margin-top: 20px;
}

.container {
  max-width: 100%
}

.carousel {
  color: #464646;
  top: 80px;
  position: relative;
  display: flex;
  justify-content: center;
  border: 3px outset gray;
  align-items: center;
  padding: 60px;
}

.buttons {
  position: relative;
  margin-right: 25px;
  justify-content: space-around;
  display: flex;
  flex-wrap: wrap;
  top: 160px;
  text-align: center;
}

.button a:hover {
  opacity: 0.2;
}

.buttons p {
  margin-top: 20px;
}

.buttons img {
  padding-top: 25px;
  height: 200px;
}

.gallery {
  position: relative;
  top: 80px;
}

.pricing {
  display: flex;
  position: relative;
  top: 80px;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 140px;
}

.pricing p,
h1 {
  margin-left: 250px;
  text-align: left;
  margin-top: 5px;
}

.pricing span {
  opacity: 0;
  user-select: none;
}

.order {
  position: relative;
  border-radius: 5px;
  background: hsl(344, 69%, 70%);
  top: 20px;
  margin-top: 60px;
  padding: 5px;
}

#order-link {
  color: white;
  text-decoration: none;
}

.order-button {
  width: 180px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.footer-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: #9A9A9A;
  height: 90px;
  max-height: 90px;
}

.footer-logo {
  height: 80px;
  position: relative;
  right: 10px;
}

.subscribe {
  border-radius: 25px;
  background: hsl(344, 69%, 70%);
  padding: 5px 20px 5px 20px;
  width: 80px;
}

#subscribe-link {
  position: relative;
  color: white;
  text-decoration: none;
  right: 40px;
}

<div class="menu-container">
  <div class="menu">
    <div class="flex-item"><a href="about.html" target="_self">About Us</a></div>
    <div class="flex-item"><a href="cakes.html" target="_self">Cakes</a></div>
    <div class="flex-item"><a href="cupcakes.html" target="_self">Cupcakes</a></div>
    <div class="flex-item"><a href="gallery.html" target="_self">Gallery</a></div>
    <div class="flex-item"><a href="ordering.html" target="_self">Prices/Order</a></div>
    <div class="flex-item"><a href="search.html" target="_self">Search</a></div>
  </div>
</div>

<header class="header-container">
  <a href="index.html" target="_self"><img src="TCCLogo.png" class="logo" /></a>
</header>

<div class="flex-container main">

  <div class="container">
    <div class="carousel">
      Here is where I will have the quick gallery/carousel when I get to JS.
    </div>

    <div class="buttons">
      <div class="button">
        <a href="cakes.html"><img src="cake.png" /></a>
        <p>Check out our delicious cake options!</p>
      </div>
      <div class="button">
        <a href="cupcakes.html"><img src="cupcake.png" /></a>
        <p>Check out our delicious cupcake options!</p>
      </div>
      <div class="button">
        <a href="ordering.html"><img src="prices.png" /></a>
        <p>Check out our competitive pricing!</p>
      </div>
    </div>
  </div>
</div>

<footer class="footer-container">
  <a id="subscribe-link" target="_blank" href="#">
    <div class="subscribe">
      <p>Subscribe</p>
    </div>
  </a>
  <img src="TCCLogo.png" class="footer-logo" />
</footer>