标签效果 (CSS)答案

【问题标题】：tab effect (CSS)标签效果 (CSS)
【发布时间】：2017-08-14 11:04:19
【问题描述】：

我用 HTML 和 CSS 编写了一些代码。输出显示在屏幕截图中。在“TABS”中有一个大小限制，而每个选项卡中的部分的大小可以变化。（以下代码中TABS的高度为200像素）

如何解决这个问题？（请不要建议任何 Java Script 代码。）

正确的形式：

如果我将其设置为自动，它将显示在图 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;
}

    <div class="items">
        <div class="tab-frame">
            <input type="radio" name="tab" id="tab1" checked>
            <label for="tab1">
                <span>
                    <img src="../images/home.png" />
                </span>
                <span>صفحه اصلی</span>
            </label>

            <input type="radio" name="tab" id="tab2">
            <label for="tab2">
                <span>
                    <img src="../images/download.png" />
                </span>
                <span>دانلود رایگان</span>
            </label>



            <div class="tabs">
                <div class="tab">
                    <div class="header header1">
                        <h2>
                            Home
                        </h2>
                    </div>
                    <div>
                        text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 
                    </div>
                </div>
                <div class="tab">
                    <div class="header header2">
                        <h2>
                            Free Download
                        </h2>
                    </div>
                    <div>
                        text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 
                    </div>
                </div>
            </div>
        </div>
    </div>

【问题讨论】：

وضّح شنو سؤالك بالضبط وماهو الناتج الذي تتوقعه؟
对不起，我不清楚你有什么问题？你想让 div 灵活地处理你的内容，或者你想固定你的 div 高度？？？
@AbdullahAlemadi 每个选项卡都有内容。此内容的高度也各不相同。（例如，第一个选项卡内容为 200 x 500 像素，第二个选项卡内容。它们的确切数量不清楚，取决于其中的文本）。在编写的代码中，选项卡的高度为 200 像素，出现了我们正在寻找的最终正确形状（图 1），但问题是它的高度是恒定的。虽然我们需要一些不确定性
@Anami 灵活

标签： html css tabs height

【解决方案1】：

如果灵活，您必须将您的 background eg. header1, header2 移动到 .tab div。
这是你想要的吗？

.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%;
	        min-height: 200px; /* you have to custom set height for your tab wrapper height */
	        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%;
	        max-height: 100%; /* set 100% to  conform the content height */
	        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;
	    }
	    
	    .tab1_background {
	        background-color: #2c7eb8;
	    }
	    
	    .tab2_background {
	        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;
	    }

<div class="items">
        <div class="tab-frame">
            <input type="radio" name="tab" id="tab1" checked>
            <label for="tab1">
                <span>
                    <img src="../images/home.png" />
                </span>
                <span>صفحه اصلی</span>
            </label>
            <input type="radio" name="tab" id="tab2">
            <label for="tab2">
                <span>
                    <img src="../images/download.png" />
                </span>
                <span>دانلود رایگان</span>
            </label>
            <div class="tabs">
                <div class="tab tab1_background">
                    <div class="header">
                        <h2>
                            Home
                        </h2>
                    </div>
                </div>
                <div class="tab tab2_background">
                    <div class="header">
                        <h2>
                            Free Download
                        </h2>
                        <div><div>sLorem ipsum dolor sit amet, consectetur adipisicing elit. Modi nobis veniam sed voluptates. Impedit quidem beatae consequuntur asperiores autem perferendis, deserunt in totam, quae modi minus? Magnam cum voluptatum, ut?</div>
                        </div>
                    </div>
                    <div>
                        text2 text2 text2 text2 text2 text2 text2 text2 text2 text2

                        <div>Quibusdam molestias, voluptate officiis numquam consequuntur tenetur sint facilis cupiditate ipsa totam animi atque dolorum, facere vel, deserunt mollitia minima doloremque at assumenda? Qui magni debitis pariatur obcaecati maxime enim.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

【讨论】：

无法正常工作。要了解更多信息，您可以在“内容”部分键入更多行。此外，通过更改选定的选项卡，仍会显示上一个选项卡的内容（如果其内容很长）。
@hamidreza 我只是做了一点改变，因为你的 .tabs 换行是相对位置，所以你必须自定义你的高度，但我改变 .tab max-height 以符合内容高度
你可以看到我对css文件的评论。
我希望内容部分的高度灵活。但是这个代码仍然是有限的，并且有一个固定的高度。要理解这一点，您可以多次重复以下部分中的条目。
Quibusdam Molestias, voluptate officio ...
我应该怎么做才能完全灵活地调整内容的高度。我也感谢您的帮助
另外，这个部分（CONTENT）写的文字行数不清楚，高度也完全不清楚。因此，需要一个变量值