В табах не работает свойство heicth:auto только нужно прописывать px, но все вкладки разного размера по содержанию текста.
.tabs1 {width: 100%; height:220px; }
.tabs1 ul,
.tabs1 li {
margin: 0;
padding: 0;
list-style: none;
}
.tabs1,
.tabs1 input[type="radio"]:checked + label {
position: relative;
}
.tabs1 li,
.tabs1 input[type="radio"] + label {
display: inline-block;
}
.tabs1 li > div,
.tabs1 input[type="radio"] {
position: absolute;
}
.tabs1 li > div,
.tabs1 input[type="radio"] + label {
border: solid 1px #ccc;
}
.tabs1 {
font: normal 13px Arial, Sans-serif;
color: #404040;
}
.tabs1 li {
vertical-align: top;
}
.tabs1 li:first-child {
margin-left: 8px;
}
.tabs1 li > div {
top: 33px;
bottom: 0;
left: 0;
width: 100%;
padding: 8px;
overflow: auto;
background: #fff;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tabs1 input[type="radio"] + label {
margin: 0 2px 0 0;
padding: 0 18px;
line-height: 32px;
background: #f1f1f1;
text-align: center;
border-radius: 5px 5px 0 0;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.tabs1 input[type="radio"]:checked + label {
z-index: 1;
background: #fff;
border-bottom-color: #fff;
cursor: default;
}
.tabs1 input[type="radio"] {
opacity: 0;
}
.tabs1 input[type="radio"] ~ div {
display: none;
}
.tabs1 input[type="radio"]:checked:not(:disabled) ~ div {
display: block;
}
.tabs1 input[type="radio"]:disabled + label {
opacity: .5;
cursor: no-drop;
}
Html
<div style="text-align:center;">Популярное</div>
<div class="tabs1">
<ul>
<li>
<input type="radio" name="tabs1-0" checked="checked" id="tabs1-0-3" />
<label for="tabs1-0-3">Сегодня</label>
<div>
1111
</div>
</li>
<li>
<input type="radio" name="tabs1-0" id="tabs1-0-4" />
<label for="tabs1-0-4">Неделя</label>
<div>
222
</div>
</li>
<li>
<input type="radio" name="tabs1-0" id="tabs1-0-5" />
<label for="tabs1-0-5">Месяц</label>
<div>
333
</div>
</li>
</ul>
</div>