I have written some codes in HTML and CSS. The output is shown in the screenshot. In "TABS" There is a size limit, while the size of the sections within each tab can vary. (In the following codes the height of TABS is 200 pixels)
How to fix this problem? (Please do not suggest any Java Script code.)
The correct form:
If I set it to auto, it will be shown in Fig. 2.
enter image description here
.items {
width: 100%;
height: auto;
float: right;
}
.tab-frame input {
display: none;
width: 100%;
height: auto;
float: right;
}
.tab-frame label {
display: block;
float: right;
cursor: pointer;
text-align: center;
width: 110px;
height: 80px;
margin: 0 5px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.tab-frame label img {
display: block;
margin: 20px auto 10px auto;
}
.tab-frame label span:nth-child(2) {
opacity: 0;
color: white;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.tab-frame label:hover span:nth-child(2) {
opacity: 1;
display: block;
}
.tab-frame label:hover {
height: 100px;
}
#tab1 + label {
margin-right: 35px;
}
.tab-frame input:checked + label {
color: white;
cursor: default;
height: 110px;
}
.tab-frame input:checked + label span:nth-child(2) {
opacity: 1;
}
.tabs {
width: 100%;
height: 200px;
float: right;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
position: relative;
}
.tab {
/*display: none;*/
clear: left;
overflow: hidden;
float: right;
width: 100%;
height: auto;
position: relative;
}
.tab-frame input:nth-of-type(1) ~ .tabs .tab:nth-child(1),
.tab-frame input:nth-of-type(2) ~ .tabs .tab:nth-child(2) {
position: absolute;
top: -100%;
transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
-webkit-transition: all 1s ease;
}
.tab-frame input:nth-of-type(1):checked ~ .tabs .tab:nth-child(1),
.tab-frame input:nth-of-type(2):checked ~ .tabs .tab:nth-child(2) {
top: 0%;
}
#tab1 + label {
background: #479cd7;
background: -moz-linear-gradient(top, #479cd7 0%, #2c7eb8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#479cd7), color-stop(100%,#2c7eb8));
background: -webkit-linear-gradient(top, #479cd7 0%,#2c7eb8 100%);
background: -o-linear-gradient(top, #479cd7 0%,#2c7eb8 100%);
background: -ms-linear-gradient(top, #479cd7 0%,#2c7eb8 100%);
background: linear-gradient(to bottom, #479cd7 0%,#2c7eb8 100%);
}
#tab2 + label {
background: #a9d747;
background: -moz-linear-gradient(top, #a9d747 0%, #88b82c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9d747), color-stop(100%,#88b82c));
background: -webkit-linear-gradient(top, #a9d747 0%,#88b82c 100%);
background: -o-linear-gradient(top, #a9d747 0%,#88b82c 100%);
background: -ms-linear-gradient(top, #a9d747 0%,#88b82c 100%);
background: linear-gradient(to bottom, #a9d747 0%,#88b82c 100%);
}
.header {
width: 100%;
height: 45px;
float: right;
margin-bottom: 40px;
}
.header1 {
background-color: #2c7eb8;
}
.header2 {
background-color: #88b82c;
}
.header h2 {
float: left;
margin: 0;
line-height: 45px;
padding: 0 35px 0 35px;
color: white;
font-weight: bold;
font-size: 18px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
صفحه اصلی
دانلود رایگان
Home
text1 text1 text1 text1 text1 text1 text1 text1 text1 text1
Free Download
text2 text2 text2 text2 text2 text2 text2 text2 text2 text2