时间戳

首页 > 解决方案 > 为什么会出现溢出？

html - 为什么会出现溢出？

问题描述

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

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

玩弄position价值观，display价值观。

我是初学者，我不知道我做错了什么。请帮我 ：）

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

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>

标签： htmlcssoverflowpositioning

解决方案

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

其他选择是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>

推荐阅读