"content" div height adapted to content.

Question

I have this tabs and I would like that the 'content' div height get adapted to the height of the content. I have tried several things but some of them doesn't work, others work but the tabs get like separated of the content. Here is the code:

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;
}

You may put your code in a [fiddle](https://jsfiddle.net/) – Lekz Flores Feb 03 '16 at 00:50 — Lekz Flores, Feb 03 '16 at 00:50

score 0 · Answer 1 · answered Feb 03 '16 at 01:18

0

Move your background and border styles to the child div of .content. Replace your CSS with the following code. Note: I removed the height off .content as no longer needed.

.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;
}

answered Feb 03 '16 at 01:18

Monzstro

1
1

Hi, I have replaced the CSS with yours, and it works great...but the footer now is no longer at the bottom of the page, it is on the content. It was working fine but probably there is something not compatible in the footer definition. – Mike Feb 03 '16 at 15:32
Where was no footer in your code. The footer will sit just below the content and will depend on the height of that content. You can either add back the height to the .content div like you had before (height: 350px; /* Alto del contenido */) if you are happy with that or look for a sticky footer solution. – Monzstro Feb 04 '16 at 01:34

score 0 · Accepted Answer · edited May 23 '17 at 12:32

0

It is because your .content div is positioned as absolute, you can just remove that.

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

I also remove the opacity and replace it to display: none; because opacity only makes the element visible. It will still take up space.

#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;
}

Here's your FIDDLE

If you still want the fading effects in showing content I found this Animation CSS3: display + opacity

edited May 23 '17 at 12:32

Community

1
1

answered Feb 03 '16 at 01:20

Lekz Flores

468
10
27

Hi, I tried it but the text of the content is not visible after the changes. And regarding the animation/fadding, yes, I would like to have a nice one, which one of the different solutions described at Animation CSS3: display + opacity do you recommend to try? or may be another one? – Mike Feb 03 '16 at 19:53
Sorry, Did a mistake, now it is correctly modified and works fine. What about the fade effect...do you recommend any of them? – Mike Feb 03 '16 at 20:07
@Mike try the answer of Chris. – Lekz Flores Feb 04 '16 at 04:03

"content" div height adapted to content.

2 Answers2