#javascript #html #css #sass #overflow
Вопрос:
я получаю эту полосу прокрутки горизонта, когда добавляю свой контент в контейнер «section3__container», даже если они небольшого размера . Я пробовал много вещей, таких как скрытое переполнение, скрытое переполнение-x, уменьшающее размер содержимого, но горизонтальная полоса продолжает появляться. мне нужна помощь, чтобы удалить эту горизонтальную полосу прокрутки.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="/static/styles/style.css" type="text/css">
<link rel='icon' href='/static/images/logo.jpeg' type='image/x-icon'/>
</head>
<body>
<div id="container">
<div id="container__section1">
<nav id="container__section1__destopNav">
<a href="" id="logo">chinaza</a>
<ul>
<li class="navItem" ><a href=""><span id="active"></span> Home</a></li>
<li class="navItem"><a href=""><span></span>About</a></li>
<li class="navItem"><a href=""><span></span>skill</a></li>
<li class="navItem"><a href=""><span></span>Service</a></li>
<li class="navItem"><a href=""><span></span>Project</a></li>
<li class="navItem"><a href=""><span></span>Contact</a></li>
<li class="navItem"><a href=""><i class="fa fa-moon-o" aria-hidden="true"></i>
</a></li>
</ul>
</nav>
<nav id="container__section1__mobilepNav">
<ul id="container__section1__mobilepNav__container">
<li id="container__section1__mobilepNav__container__1"><a href="" id="logo2">chinaza</a></li>
<li id="container__section1__mobilepNav__container__2">
<ul id="container__section1__mobilepNav__container__2_1">
<li id="theme">
<i class="fa fa-moon-o" aria-hidden="true"></i>
</li>
<li id="menu">
<i class="fa fa-bars" aria-hidden="true"></i>
</li>
<ul id="menu_content">
<li class="navItem"><a href=""><span></span> Home</a></li>
<li class="navItem"><a href=""><span></span>About</a></li>
<li class="navItem"><a href=""><span></span>skill</a></li>
<li class="navItem"><a href=""><span></span>Service</a></li>
<li class="navItem"><a href=""><span></span>Project</a></li>
<li class="navItem"><a href=""><span></span>Contact</a></li>
</ul>
</ul>
</li>
</ul>
</nav>
</div>
<div id="section2" >
<ul id="section2__container">
<li id="section2__container__text" class="section2__container__class">
<ul id="section2__container__text__container">
<li>
<ul id="section2__container__text__container__textContainer__socialMedia">
<li><a href=""><i class="fa fa-github" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-linkedin-square" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
</ul>
</li>
<li id="section2__container__text__container__textContainer">
<h1>Hi, Am Chinaza</h1>
<h4>Frontend developer </h4>
<p> high level experience in web
design and development knowledge,
producing quality work
</p>
<div id="section2__container__text__container__textContainer__container"><a href="">Contact me</a></div>
</li>
</ul>
</li>
<li id="section2__containerImage" class="section2__container__class">
<div id="section2__containerImage__container1" class="section2__containerImage__containers">
<div id="section2__containerImage__container2" class="section2__containerImage__containers">
<img src="static/images/about3.svg " alt="">
</div>
</div>
</li>
</ul>
</div>
<div id="section3">
<h1 id="section3__about">About me</h1>
<h4 id="section3_introduction">My introduction</h4>
<ul id="section3__container">
<li id="section3__container__1" class="section3__container__items">
<img src="static/images/undraw_Developer_activity_re_39tg.svg" alt="">
</li>
<li id="section3__container__2" class="section3__container__items">
<p>web developer, with extensive knowledge
and years of experience, working in web
technology and UI/Ux design, delivering quality
work.
</p>
<ul id="section3__container__2__container">
<li>
<h1>3 </h1>
<p>Years experinece</p>
</li>
<li>
<h1>3</h1>
<p>Completed project</p>
</li>
<li>
<h1>1</h1>
<p>Companies worked</p>
</li>
</ul>
<div id="section3__container__2__download">
<a href=""> Download <i class="fa fa-arrow-circle-down" aria-hidden="true"></i></a>
</div>
</li>
</ul>
</div>
</div>
<script src="/static/home.js"></script>
</body>
</html>
$navFontSize: 18px;
$navcolor:black;
$maincolour: rgb(54, 54, 168);
$fadeAsh:rgb(114, 112, 112);
$minwidth:290px;
$h1FontSize:40px;
$h4FontSize:20px;
$h1FontSizeMobile:30px;
$h4FontSizeMobile:20px;
$paragraph:23px;
@mixin button {
width: 170px;
height: 45px;
text-align: center;
line-height: 45px;
margin-top: 40px;
a{
text-decoration: none;
display: inline-block;
width: 100%;
height: 100%;
font-size: 20px;
border: 2px solid $maincolour;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
background-color: rgb(236, 232, 247);
transition: background-color 1s;
}
amp;:hover a{
background-color: $maincolour;
color: white;
border: none;
}
}
*{
margin: 0;
padding: 0;
}
#container{
width: 100vw;
height: 100vh;
}
#container__section1{
width: 100%;
height: 80px;
z-index: 2000;
#container__section1__destopNav{
width:100%;
height: 100px;
position: fixed;
z-index: 200;
#logo{
text-decoration: none;
padding: 30px;
line-height: 30px;
color: $navcolor;
font-size:25px;
}
ul{
display: flex;
flex-direction: row;
text-align: center;
margin: 0 auto;
width: 600px;
list-style: none;
justify-content: space-evenly;
li{
position: relative;
padding: 9px;
span{
position: absolute;
bottom: 0;
left: 0;
height: 0px;
width: 0;
transition: width 2s height 4s;
background-color: rgb(54, 54, 168);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
#active{
height: 3px;
width: 100%;
background-color: $maincolour;
}
a{
text-decoration: none;
font-size: $navFontSize;
color: $navcolor;
width: 100%;
padding: 5px;
}
}
li:hover span{
height: 3px;
width: 100%;
background-color: rgb(81, 100, 209);
}
}
}
}
#section2{
width: 100%;
height: auto;
z-index: -1;
margin-top: 70px;
min-width: $minwidth;
#section2__container{
width: 85%;
display: flex;
flex-wrap: wrap-reverse;
list-style: none;
margin: 0;
padding: 0;
margin: 0 auto;
justify-content: space-evenly;
height: 100%;
.section2__container__class{
list-style: none;
height: 400px;
.section2__containerImage__containers{
margin-top: 40px;
width: 270px;
height: 270px;
}
#section2__containerImage__container1{
position: relative;
transform: translateY(4px) rotateZ(-5deg);
background-color: #3636a8;
margin: 0 auto;
}
#section2__containerImage__container2{
position: absolute;
bottom: 0;
transform: translateY(4px) rotateZ(5deg);
img{
width: 100%;
height: 100%;
}
}
}
#section2__container__text #section2__container__text__container{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
height: 100%;
#section2__container__text__container__textContainer__socialMedia{
flex: 1;
width: 100px;
height: 200px;
list-style: none;
vertical-align : middle;
margin-top: 90px;
padding: 0;
padding-right: 30px;
li{
padding-top: 25px;
font-size: 20px;
color:rgb(54, 54, 168);
}
}
#section2__container__text__container__textContainer{
flex: 2;
h1{
font-size: $h1FontSize;
margin-top: 20px;
}
h4{
color: $fadeAsh;
font-size: 23px;
margin-top: 15px;
}
p{
color: $fadeAsh;
margin-top: 15px;
width: 330px;
font-size: 20px;
}
#section2__container__text__container__textContainer__container{
@include button()
}
}
}
}
}
#section3{
width: 100%;
overflow-x: hidden;
#section3__about{
overflow-x: hidden;
text-align: center;
font-size: $h1FontSize;
}
#section3_introduction{
text-align: center;
color:$fadeAsh;
font-size: $h4FontSize;
margin-top: 25px;
}
#section3__container{
display: flex;
flex-wrap: wrap;
width: 80%;
margin: 0 auto;
height: fit-content;
list-style: none;
margin-top: 60px;
#section3__container__1{
text-align: center;
img{
width: 314px;
height: 314px;
}
}
.section3__container__items{
flex: 1;
}
#section3__container__2 {
p{
width: 70%;
color: $fadeAsh;
font-size: $paragraph;
}
#section3__container__2__container{
list-style: none;
display: flex;
flex-wrap: nowrap;
margin-top: 30px;
width: 85%;
li{
text-align: center;
width: 100%;
}
li h1{
text-align: center;
}
}
#section3__container__2__download{
@include button()
}
}
}
}
#container__section1__mobilepNav{
display: none;
}
@media(max-width:1024px){
#container{
height: 100%;
}
#container__section1__destopNav{
display: none;
}
#container__section1__mobilepNav{
display:inline-block;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 65px;
box-shadow:0px 4px 20px rgb(189, 188, 188);
z-index: 1;
#container__section1__mobilepNav__container{
height: 60px;
box-shadow:0px 4px 20px rgb(189, 188, 188);
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
padding-top: 20px;
background-color: white;
li{
width: 100px;
}
li #logo2{
text-decoration: none;
font-size:20px;
padding-left: 20px;
}
#container__section1__mobilepNav__container__1{
text-align: left;
}
#container__section1__mobilepNav__container__2{
#container__section1__mobilepNav__container__2_1{
display: flex;
list-style: none;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
width: 100px;
#menu_content{
position: absolute;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
width:0%;
padding-top: 46px;
height:0rem;
top: -173px;
left: 0;
transition: width 2s height 4s;
list-style: none;
height:9rem;
width:100%;
display: none;
:nth-child(2){
text-align: left;
}
.navItem a{
text-decoration: none;
}
}
#menu{
amp;:hover #menu_content{
height:9rem;
width:100%;
display: block;
display: flex;
justify-content: space-around;
}
}
}
}
}
}
#section2{
margin-top: 0px;
#section2__container{
width: 100%;
.section2__container__class{
.section2__containerImage__containers{
margin-top: 40px;
width: 210px;
height: 210px;
}
}
}
}
#section3{
#section3__about{
font-size:$h1FontSizeMobile;
}
#section3__container{
width: 100%;
#section3__container__1{
text-align: center;
img{
width: 210px;
height: 210px;
}
}
}
#section3__container #section3__container__2{
text-align: center;
p{
width: 90%;
margin: 0 auto;
}
#section3__container__2__container{
width: 100%;
}
#section3__container__2__download{
margin: 0 auto;
margin-top: 40px;
}
}
}
}
@media(max-width:690px){
#section2__container__text{
width: 100%;
min-width:$minwidth;
}
#section2__containerImage{
position: relative;
}
#section2__container__text__container__textContainer__socialMedia{
position: absolute;
top: 50px;
}
#section2 #section2__container #section2__container__text #section2__container__text__container
{
width: 90%;
margin: 0 auto;
}
#section2 #section2__container #section2__container__text #section2__container__text__container
#section2__container__text__container__textContainer{
margin: 0 auto;
p{
width: 90%;
}
h1{
font-size: 30px;
}
}
#section2 #section2__container .section2__container__class{
height: 300px;
}
}```
Комментарии:
1. Использовать переполнение-x: скрыто
2. Вы можете просто избавиться от полосы прокрутки, скрыв переполнение на соответствующих элементах (вплоть до тела), но это звучит так, как будто вы не ожидаете переполнения, если скажете «даже если они небольшого размера», поэтому может быть полезно исследовать, а не просто подавлять переполнение. Как вы добавляете больше контента? Это в JS или только в HTML?
3. просто html, вы можете скопировать код, опробовать его и увидеть горизонтальное переполнение. когда вы посмотрите на мой scss, вы увидите, где я добавил overflow-x: hidden; ко всем div, которые могут вызывать переполнение.
Ответ №1:
body {
overflow-x: hidden; /* Hide horizontal scrollbar */
} Ресурс: W3Schools
Комментарии:
1. я попробовал, но это все еще не работает, у меня все еще есть горизонтальное переполнение