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

Posted 2023-03-06

【中文标题】“内容” div 高度适应内容。

【英文标题】："content" div height adapted to content.

【发布时间】：2016-05-12 00:45:51

【问题描述】：

我有这个标签，我希望'内容' 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;

【问题讨论】：

你可以把你的代码放在fiddle

【参考方案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;

【讨论】：

您好，我已将 CSS 替换为您的 CSS，效果很好……但页脚现在不再位于页面底部，而是位于内容上。它工作正常，但页脚定义中可能存在不兼容的内容。

代码中没有页脚的地方。页脚将位于内容的正下方，并取决于该内容的高度。您可以像以前一样将高度添加回 .content div（高度：350px；/* Alto del contenido */），如果您对此感到满意，或者寻找粘性页脚解决方案。

【参考方案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

【讨论】：

您好，我试过了，但是更改后内容的文本不可见。关于动画/渐变，是的，我想要一个不错的，动画 CSS3 中描述的不同解决方案中的哪一种：你推荐尝试显示 + 不透明度？或者可能是另一个？

抱歉，出错了，现在已经正确修改并且可以正常工作了。淡化效果怎么样......你推荐它们中的任何一个吗？

@Mike 试试 Chris 的回答。