Just change the attribute of overflow in Text class of your CSS to hidden:
.Text {
width: 500px;
min-height: 500px;
height: auto;
overflow: hidden;
margin: 50px 30px;
border: 2px solid red;
}
Basically, since your overflow was set to auto, it tried to scale the content for which it had to show the scrollbar. For more details check out this W3schools documentation : https://www.w3schools.com/css/css_overflow.asp
You can disable scrollbars with overflow: hidden; It can be overflow in general, but if you want only horizontal to be hidden, you can put overflow-x: hidden, and for vertical: overflow-y: hidden
So, in your css you can put it like this:
.Resume {
overflow-x: hidden;
width: 180px;
height: 60px;
margin: 0px auto;
border-radius: 5px;
background-color: #00d363;
border: 1px solid #00d363;
font-family: "IranSans";
text-align: center;
}
or you can do
.Text > div {
box-sizing: border-box;
}
so all nested divs with border fits into the parent el
I want to set ,tex1,tex2 and text3 division,in the Text Division class,without Scroll bar in the bottom side on it.but as you see there is a scroll bar in the bottom side .what is my mistake that does not let me ,not to have scroll bar in the bottom side of Text Class Div?
body {
margin: 0px;
direction: rtl;
}
.Text {
width: 500px;
min-height: 500px;
height: auto;
overflow: auto;
margin: 50px 30px;
border: 2px solid red;
}
.Text1 {
width: 100%;
height: 60px;
margin: 30px auto;
border: 1px dashed green;
font-family: "IranSans";
font-size: 20px;
text-align: center;
color: #fff;
}
.Text2 {
width: 100%;
min-height: 60px;
height: auto;
overflow: auto;
color: #fff;
font-size: 32px;
font-weight: bolder;
font-family: "IranSans";
text-align: center;
}
.Text3 {
width: 100%;
min-height: 80px;
height: auto;
overflow: auto;
font-size: 12px;
font-family: "IranSans";
color: #fff;
text-align: center;
border: 1px solid yellow;
}
.Resume {
width: 180px;
height: 60px;
margin: 0px auto;
border-radius: 5px;
background-color: #00d363;
border: 1px solid #00d363;
font-family: "IranSans";
text-align: center;
}
.RezumeA {
width: 100%;
height: 100%;
display: block;
border-radius: 5px;
text-decoration: none;
color: #fff;
line-height: 50px;
}
.RezumeA:hover {
background-color: #007bff;
color: #00d363;
border: #00d363;
}
<body>
<div class="Text">
<div class="Text1">بیش از 5000 شغل</div>
<div class="Text2">شغل رویایی ات دست پیدا کن</div>
<div class="Text3">ما بهترین و سریعترین ،راههای دستیابی به شغل مورد علاقه تان فراهم کرده ایم</div>
<div class="Resume"><a href="#" class="RezumeA">ارسال رزومه</a></div>
</div>
</div>
</header>
</body>