为什么会出现溢出？答案

【问题标题】：Why does overflow appears?为什么会出现溢出？
【发布时间】：2020-04-29 14:12:47
【问题描述】：

当我添加 middle div（屏幕截图中的蓝色）时，会出现一个水平滚动条。

我试图改变width 的divs，决定使用不同的度量单位。

使用position 值、display 值。

我是初学者，我不知道自己做错了什么。请帮帮我:)

也许我的代码中的图像有问题？ Screenshot

body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: hsl(192, 100%, 9%);
  width: 100vw;
}

* {
  box-sizing: border-box;
}

h1,
h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

p {
  font-size: 18px;
}

button {
  font-family: 'Open Sans', sans-serif;
  ;
  font-weight: 700;
}


/* Header */
header {
  height: 100vh;
  width: 100%;
  background-image: url(./images/bg-hero-desktop.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: hsl(193, 100%, 96%);
}

.container {
  width: 85%;
  margin: 0 auto;
  padding-top: 3rem;
}

nav {
  display: flex;
  justify-content: space-between;
}

.nav-btn {
  font-family: inherit;
  width: 11rem;
  border-radius: 1.2rem;
  background-color: #fff;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  outline: none;
}

.main {
  display: flex;
  justify-content: space-between;
}

.main-text {
  margin-top: 8.5rem;
  width: 32rem;
}

.mockups {
  margin-top: 4rem;
  display: block;
  height: auto;
  width: 50%;
}

.main-btn {
  color: #fff;
  background-color: hsl(322, 100%, 66%);
  width: 14.5rem;
  height: 2.8rem;
  border: none;
  border-radius: 1.4rem;
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  margin: .2rem .4rem;
}

/* Middle */
.middle {
  width: 20%;
  height: 100px;
  background-color: blue;
}

<head>
  <meta charset="UTF-8">
  <title>Huddle</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>

<body>
  <header>
    <div class="container">
      <nav>
        <img class="logo" src="./images/logo.svg" alt="">
        <button class="nav-btn">Try It Free</button>
      </nav>
      <div class="main">
        <div class="main-text">
          <h1>Built The Community <br> Your Fans Will Love</h1>
          <p>Huddle re-imagines the way we build communities.
          You have a voice, but so does your audience. 
          Create connections with your users as engage in genuine discussion.</p>
          <button class="main-btn">Get Started For Free</button>
        </div>
        <img class="mockups" src="./images/illustration-mockups.svg" alt="">
      </div>
    </div>
  </header>
  <div class="middle">
    <div class="grow"></div>
    <div class="conv"></div>
    <div class="users"></div>
  </div>
</body>

【问题讨论】：

标签： html css overflow positioning

【解决方案1】：

只需从正文的 CSS 中删除 width: 100vw;。

其他选项是在正文上使用overflow-x: hidden;。

更新

我认为由于垂直滚动条而存在水平滚动，因此当您将正文的宽度设置为100vw时会导致溢出。

考虑到这一点，您可以保留width: 100vw;，只需设置max-width: 100%。

body {
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	font-weight: 400;
	color: hsl(192, 100%, 9%);
}

* {
	box-sizing: border-box;
}

h1, h2 {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
}

p {
	font-size: 18px;
}

button {
	font-family: 'Open Sans', sans-serif;;
	font-weight: 700;
}

/* Header */

header {
	height: 100vh;
	width: 100%;
	background-image: url(./images/bg-hero-desktop.svg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-color: hsl(193, 100%, 96%);
}

.container { 
	width: 85%;
	margin: 0 auto;
	padding-top: 3rem;
}

nav {
	display: flex;
	justify-content: space-between;
}

.nav-btn {
	font-family: inherit;
	width: 11rem;
	border-radius: 1.2rem;
	background-color: #fff;
	border: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
	outline: none;
}

.main {
	display: flex;
	justify-content: space-between;
}

.main-text {
	margin-top: 8.5rem;
	width: 32rem;

}

.mockups {
	margin-top: 4rem;
	display: block;
	height: auto;
	width: 50%;
}

.main-btn {
	color: #fff;
	background-color: hsl(322, 100%, 66%);
	width: 14.5rem;
	height: 2.8rem;
	border: none;
	border-radius: 1.4rem;
	outline: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	margin: .2rem .4rem;
}

/* Middle */

.middle {
	width: 20%;
	height: 100px;
	background-color: blue;
}

<html>
<head>
	<meta charset="UTF-8">
	<title>Huddle</title>
	<link rel="stylesheet" href="styles.css">
	<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

</head>
<body>
	<header>
		<div class="container">
			<nav>
				<img class="logo" src="./images/logo.svg" alt="">
				<button class="nav-btn">Try It Free</button>
			</nav>
			<div class="main">
				<div class="main-text">
					<h1>Built The Community <br> Your Fans Will Love</h1>
					<p>Huddle re-imagines the way we build communities. You have a voice, but so does your audience. Create connections with your users as engage in genuine discussion.</p>
					<button class="main-btn">Get Started For Free</button>
				</div>
				<img class="mockups" src="./images/illustration-mockups.svg" alt="">
			</div>
		</div>
	</header>
	<div class="middle">
		<div class="grow"></div>
		<div class="conv"></div>
		<div class="users"></div>

	</div>

</body>
</html>

【讨论】：

谢谢！去除身体的“宽度”实际上有所帮助。你能说出为什么会这样吗？是带有填充还是视口功能？
当然，我认为水平滚动是由于垂直滚动而存在的，所以当你将body的宽度设置为100vw时会溢出。

【解决方案2】：

将此添加到 css

   body {
     overflow-x: hidden;
    }

【讨论】：