楼层区tabs容器高度塌陷问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container {width:1200px; margin:0 auto; position:relative;}
dl {float:left; width:200px; height:50px; border:1px solid red;}
.clearfix:after {content:""; clear:both; display:block;}
.tabs {position: absolute;}
.tab2 {display: none;}
</style>
</head>
<body>
<div class="container clearfix">
<div class="tabs tab1 clearfix">
<dl>
<dt>tab1</dt>
<dd>1</dd>
</dl>
<dl>
<dt>2</dt>
<dd>2</dd>
</dl>
<dl>
<dt>3</dt>
<dd>3</dd>
</dl>
<dl>
<dt>4</dt>
<dd>4</dd>
</dl>
<dl>
<dt>5</dt>
<dd>5</dd>
</dl>
<dl>
<dt>6</dt>
<dd>6</dd>
</dl>
<dl>
<dt>7</dt>
<dd>7</dd>
</dl>
<dl>
<dt>8</dt>
<dd>8</dd>
</dl>
<dl>
<dt>9</dt>
<dd>9</dd>
</dl>
<dl>
<dt>10</dt>
<dd>10</dd>
</dl>
<dl>
<dt>11</dt>
<dd>11</dd>
</dl>
<dl>
<dt>12</dt>
<dd>12</dd>
</dl>
</div>
<div class="tabs tab2 clearfix">
<dl>
<dt>tab2</dt>
<dd>1</dd>
</dl>
<dl>
<dt>2</dt>
<dd>2</dd>
</dl>
<dl>
<dt>3</dt>
<dd>3</dd>
</dl>
<dl>
<dt>4</dt>
<dd>4</dd>
</dl>
<dl>
<dt>5</dt>
<dd>5</dd>
</dl>
<dl>
<dt>6</dt>
<dd>6</dd>
</dl>
<dl>
<dt>7</dt>
<dd>7</dd>
</dl>
<dl>
<dt>8</dt>
<dd>8</dd>
</dl>
<dl>
<dt>9</dt>
<dd>9</dd>
</dl>
<dl>
<dt>10</dt>
<dd>10</dd>
</dl>
<dl>
<dt>11</dt>
<dd>11</dd>
</dl>
<dl>
<dt>12</dt>
<dd>12</dd>
</dl>
</div>
</div>
</body>
</html>我做了一个demo来说明我的问题，container类包含多个tabs选项卡，高度要自适应，tabs选项卡用绝对定位叠放在一起，用js控制其显示。tabs内部有多个dl，dl高度确定，但是个数不一定，所以tabs高度要自适应。用after伪类的方法解决了tabs高度塌陷的问题，但是container用了after清除浮动以后高度还是0。请问如何让container的高度跟着tabs走，难道要用脚本控制吗？
2
收起
正在回答
2回答
你好同学 ，这里给父元素container清除浮动是没有用的 。清除浮动是清除浮动带来的高度塌陷 。而container的子元素设置的是绝对定位 ，所以无效哦。这里tabs去掉定位container就有高度了。
本作业中 ，楼层区域的商品盒子不需要叠加。。因为display:none会让其他两个盒子隐藏不占据位置 ，所以无论哪一个盒子显示 ，都能显示到如下红框中：
祝学习愉快 ，望采纳。
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星