“内容” div 高度适应内容。

Question

我有这个标签，我希望'内容' div 高度适应内容的高度。我尝试了几件事，但其中一些不起作用，另一些起作用，但选项卡就像与内容分开一样。 代码如下：

HTML



 <div id="contenedor">
    <input id="tab-1" type="radio" name="radio-set" class="tab-      selector-1"     checked="checked" />
    <label for="tab-1" class="tab-label-1">Pestaña1</label>

    <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
    <label for="tab-2" class="tab-label-2">Pestaña2</label>

    <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
    <label for="tab-3" class="tab-label-3">Pestaña3</label>

    <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
    <label for="tab-4" class="tab-label-4">Pestaña4</label>

    <div class="content">
        <div class="content-1">
            "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
        </div>
        <div class="content-2">
            Contenido2
        </div>
        <div class="content-3">
            Contenido3
        </div>
        <div class="content-4">
            Contenido4
        </div>
    </div>
</div>

 CSS


#contenedor {
    margin-top: 100px;
    margin-right: auto;
    margin-left: 16px;
    margin-bottom: 40px;
    width: 82%;  /* Ancho del contenedor */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#contenedor input {
    height: 33px;
    visibility: hidden;
}

#contenedor label {
float: left;
cursor: pointer;
font-size: 13px;  /* Tamaño del texto de las pestañas */
line-height: 40px;
height: 40px;
padding: 0 20px;
display: block;
color: #3078AA;  /* Color del texto de las pestañas */
text-align: center;
border-radius: 5px 5px 0 0;
background: #edeade;  /* Fondo de las pestañas */
margin-right: 5px;
}

#contenedor input:hover + label {
background: #e8e4d4;  /* Fondo de las pestañas al pasar el cursor por encima */
color: #d98943;  /* Color del texto de las pestañas al pasar el cursor por encima */
}

#contenedor input:checked + label {
    background: #f4f2ea;  /* Fondo de las pestañas al presionar */
    color: #3078AA; /* Color de las pestañas al presionar */
    z-index: 6;
    line-height: 45px;
    height: 45px;
    position: relative;
    top: -5px;
    -webkit-transition: .1s;
    -moz-transition: .1s;
    -o-transition: .1s;
    -ms-transition: .1s;
    border-top: 1px solid #DACC9A;
    border-left: 1px solid #DACC9A;
    border-right: 1px solid #DACC9A;
}

.content {
    background: #f4f2ea;  /* Fondo del contenido */
    position: relative;
    width: 100%;
    height: 350px;  /* Alto del contenido */
    padding: 30px;
    z-index: 5;
    border-radius: 0 5px 5px 5px;
    border: 1px solid #DACC9A;
}

.content div {
position: absolute;
z-index: -100;
opacity: 0;
transition: all linear 0.1s;
}

#contenedor input.tab-selector-1:checked ~ .content .content-1,
#contenedor input.tab-selector-2:checked ~ .content .content-2,
#contenedor input.tab-selector-3:checked ~ .content .content-3,
#contenedor input.tab-selector-4:checked ~ .content .content-4 {
    z-index: 100;
    opacity: 1;
    -webkit-transition: all ease-out 0.2s 0.1s;
-moz-transition: all ease-out 0.2s 0.1s;
-o-transition: all ease-out 0.2s 0.1s;
-ms-transition: all ease-out 0.2s 0.1s;
}

Answer 1

将您的背景和边框样式移动到 .content 的子 div。用以下代码替换您的 CSS。 注意：我删除了 .content 不再需要的高度。

.content {
    position: relative;
    width: 100%;
    z-index: 5;
}

.content div {
    border-radius: 0 5px 5px 5px;
    padding: 30px;
    border: 1px solid #DACC9A;
    background: #f4f2ea;  /* Fondo del contenido */
    position: absolute;
    width:100%;
    z-index: -100;
    opacity: 0;
    transition: all linear 0.1s;
}

Answer 2

这是因为您的.content div 定位为absolute，您可以将其删除。

.content div {
    z-index: -100;
    display: none;
}

我还删除了opacity 并将其替换为display: none;，因为opacity 仅使元素可见。它仍然会占用空间。

#contenedor input.tab-selector-1:checked ~ .content .content-1,
#contenedor input.tab-selector-2:checked ~ .content .content-2,
#contenedor input.tab-selector-3:checked ~ .content .content-3,
#contenedor input.tab-selector-4:checked ~ .content .content-4 {
    z-index: 100;
    display: inline;
}

这是你的FIDDLE

如果您仍然希望显示内容时的淡化效果，我发现了这个Animation CSS3: display + opacity