为什么在添加h1时向我的网页添加水平滚动条？

时间：2019-05-17 21:40:44

标签： html css

当我停下来并发现有一个水平滚动条时，我正在一个网站上工作。看起来好像有些东西在向右晃动，但我的devtools找不到任何东西。因此，我开始从底部开始注释掉我的html和css，以查看添加滚动条的确切时间和位置。及其在html的第43行。这是一个h1元素，一旦删除，滚动条便消失了？为什么会这样？

const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');

ham.addEventListener('click', function() {
	ham.classList.add('ham-open');
	menu.style.marginLeft = '50px';
})

menuClose.addEventListener('click', function() {
	ham.classList.remove('ham-open');
	menu.style.marginLeft = '-700px';

})




window.sr = ScrollReveal();

sr.reveal('.info', {
	duration: 2000,
	origin: 'bottom'
})
html, body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.header {
	background: black;
	width: 100vw;
	height: 100vh;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	display: flex;
}

.nav-wrap {
	flex-basis: 40%;
}

.nav-wrap i {
	color: white;
	font-size: 2rem;
	position: absolute;
	right: -33px;
	top: 0px;
	transition: all .1s ease;
}

.nav-wrap i:hover {
	cursor: pointer;
	transform: scale(1.15);
}

.nav-box {
	margin-left: 50px;
	margin-top: 100px;
	max-width: 70px;
	cursor: pointer;
	position: fixed;
	z-index: 10;
}

.b1, .b2, .b3 {
	width: 70px;
	height: 8.5px;
	border-radius: 5px;
	background-color: #fff;
	margin-bottom: 10px;
	transition: all .15s ease;
}

.b1 {
	background-color: #56ff47;
}

.b3 {
	background-color: #ff4c4c;
}

.ham-open .b1 {
	background-color: #56ff47;
	transform: translateY(100px);
	position: relative;
	z-index: 1;
}

.ham-open .b2 {
	transform: translateY(81.5px);
	width: 110px;
	position: relative;
	left: 60px;
	z-index: 0;
}

.ham-open .b3 {
	background-color: #ff4c4c;
	transform: translateY(63px);
	width: 140px;
	position: relative;
	left: 160px;
	z-index: 2;
}

.menu {
	display: flex;
	border-left: 8px solid #56ff47;
	flex-direction: column;
	background-color: #fff;
	margin-left: -700px;
	width: 292px;
	padding-top: 10px;
	padding-bottom: 10px;
	position: fixed;
	border-radius: 5px;
	top: 225px;
	transition: all .15s;
	z-index: 10;
}

.menu a {
	text-decoration: none;
	color: limegreen;
	font-family: 'Kumar One Outline';
	font-size: 2.3rem;
	text-align: center;
	margin-top: 12px;
	margin-bottom: 12px;
	transition: all .5s ease;
}

a:hover {
	color: #007001;
}

.info-wrap {
	flex-basis: 60%;
}

.info {
	font-family: 'Cedarville Cursive';
	color: white;
	font-weight: bold;
	font-size: 4.5rem;
	text-align: center;
	margin-top: 60px;
}

.logo-wrap {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.logo-wrap div {
	font-family: 'Staatliches';
	color: white;
	font-size: 13rem;
	font-weight: bold;
	letter-spacing: 10px;
	margin-bottom: -5rem;
	position: relative;
	margin-left: auto;
	margin-right: auto;

}



/*------ABOUT------*/



/*.about-section {
	background-color: #17a832;
	width: 100vw;
}*/

/*.about-section h1 {
	text-align: center;
	font-size: 4.5rem;
	margin-top: 0;
	margin-bottom: 30px;
	padding-top: 15px;
	color: white;
	font-family: 'Cedarville Cursive';
	font-weight: bold;
}

.about-wrap {
	display: flex;
	padding-bottom: 150px;
}

.about-info, .image-slider-wrap {
	flex-basis: 50%;
}

.about-info p {
	color: white;
	font-family: 'Josefin Sans';
	font-size: 2rem;
	margin-left: 100px;
	margin-bottom: 0;
	margin-top: 0;
}

.image-slider {
	width: 650px;
	height: 400px;
	background-color: red;
	border-radius: 13px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.image-slider i {
	color: white;
	font-size: 5rem;
	position: absolute;
	top: 50%;
	margin-top: -40px;
	transition: all .1s ease;
	cursor: pointer;
}

#left {
	transform: rotate(-90deg);
	left: -30px;
}

#right {
	transform: rotate(90deg);
	right: -30px;
}

#left:hover {
	transform: rotate(-90deg) scale(1.3);
}

#right:hover {
	transform: rotate(90deg) scale(1.3);
}
*/

/*------MENU------*/


/*.menu-section {
	background-color: #edb12f;
	display: flex;
	width: 100vw;
	top: -60px;
	position: relative;
	clip-path: polygon(0% 0%, 100% 3%, 100% 100%, 0% 100%);
}

.menu-section h1 {
	font-size: 9.5rem;
	margin-top: 0;
	position: absolute;
	left: 100px;
	margin-bottom: 60px;
	padding-top: 15px;
	color: white;
	font-family: 'Cedarville Cursive';
	font-weight: bold;	
}

.column-left, .column-right, .column-middle {
	flex-basis: 33.33%;
	margin-top: 230px;
	outline: 1px solid green;
}

.column-left {
	display: flex;
	justify-content: flex-end;
}

.column-left .menu-h2:after {
	display: block;
	content: "beans and rice included";
	color: white;
	font-size: 1.5rem;
	font-family: 'Josefin Sans';
	margin-top: -25px;
}

.column-middle h2:after, .column-right h2:after {
	content: "";
	display: block;
	width: 100%;
	height: 3px;
	background-color: white;
	border-radius: 3px;
	margin-top: -25px;
}

.column-middle {
	display: flex;
	justify-content: center;
}

.column-right {
	display: flex;
	justify-content: flex-start;
}

.column {
	outline: 1px solid green;
	min-width: 420px;
	display: flex;
	flex-direction: column;
}

.column h2 {
	display: inline-block;
	align-self: center;
	font-family: 'Cedarville Cursive';
	color: #17a832;
	font-size: 3rem;
}

.row {
	font-family: 'Josefin Sans';
	font-size: 1.5rem;
}

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

.menu-h2 {
	text-align: center;
}*/

/*.design-left, .design-right {
	position: absolute;
}*/

/*.design-right {
	right: 0;
	transform: rotate(180deg);
}*/

/*.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 35px solid transparent;
    border-bottom: 35px solid transparent; 
    border-left: 70px solid green;
 	position: relative;
 	top: -16px;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 35px solid transparent;
  border-bottom: 35px solid transparent;  
  border-right:70px solid limegreen;
  position: relative;
  top: 20px; 
}

.arrow-top {
    width: 0; 
    height: 0; 
    border-top: 35px solid transparent;
    border-bottom: 35px solid transparent; 
    border-left: 70px solid #20a04b;
 	position: relative;
 	top: -121px;
 	left: 70px;
}

.top-middle {
	position: relative;
	top: -130px;
}

.bottom-middle .arrow-left {
	top: -40px;
}

.bottom-middle .move {
	top: -75px;
}

.bottom {
	position: relative;
	top: -48px;
}

.bottom .arrow-left {
	top: -50px;
}*/


/*------HOURS------*/

/*.hours-section {
	background-color: green;
	width: 100vw;
	height: 100px;
}*/
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Mexican Restaurant</title>
	<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive|Josefin+Sans|Kumar+One+Outline|Staatliches" rel="stylesheet">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<header>
		<div class="header">
			<div class="nav-wrap">
				<div class="nav-box">
					<div class="b1"></div>
					<div class="b2"></div>
					<div class="b3"></div>
				</div>

				<div class="menu">
					<a href="#">Home</a>
					<a href="#">About</a>
					<a href="#">Menu</a>
					<a href="#">Hours</a>
					<a href="#">Contact</a>
					<a href="#">Location</a>
					<i class="fas fa-times" id="menu-close"></i>
				</div>
			</div>
			<div class="info-wrap">
				<p class="info">Authentic Mexican Food</p>

				<div class="logo-wrap">
					<div>YOUR</div>
					<div>LOGO</div>
					<div>HERE</div>
				</div>
			</div>
		</div>
	</header>
	<main>
		<div class="about-section">	
			<h1 class="about-h1">About Us</h1>
		</div>

	</main>
	<footer>
		
	</footer>
  <script src="https://unpkg.com/scrollreveal"></script>
  <script src="script.js"></script>
</body>
</html>

2 个答案:

答案 0 :(得分：1)

设置width: 100vw;实际上是一个问题。尝试将max-width: 100%;添加到CSS中width: 100vw;的任何位置。因此，以您的标题为例：

.header {
    background: black;
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    display: flex;
}

答案 1 :(得分：0)

就像jmalenfant所说的，它是标题。 “宽度：100vw；”很好，但是您必须确保声明“最大宽度：100％”。我确实看到它的边距导致增加额外的宽度。依次添加水平滚动条。 F12并右键单击屏幕的最右侧并进行检查。如果将鼠标悬停在开发人员痛苦中的H1元素上，您将看到它。

相关问题
最新问题