关于标签嵌套设置父元素固定高度子元素会被放到底层的问题?

#关于标签嵌套设置父元素固定高度子元素会被放到底层的问题?
本来想用jQuery做一个折叠菜单,但是还没开始就遇到问题了。我把几个div作为二级菜单嵌套到一个div里,一开始还没啥问题

本来是这个样子的:

图片说明


<style>
.aaa {
    height: 20px;
    background-color: black;
    color: white;
}

.bbb {
background-color: teal;
color:black;
}
</style>
</head>

<body>
    <div class="aaa">CCC
        <div class="bbb">ddd</div>
        <div class="bbb">ddd</div>
        <div class="bbb">ddd</div>
        <div class="bbb">ddd</div>
        <div class="bbb">ddd</div>
        <div class="bbb">ddd</div>
    </div>
    <div class="aaa">CCC</div>
    <div class="aaa">CCC</div>
    <div class="aaa">CCC</div>
        </body>

</html>

然后给一级div加了固定高度后,就变成这个样子了

图片说明

二级菜单不再被放到一级div的底下,而是被分为两层被一级div盖住了,后来把一级div的高度改为百分比时又没这个问题了,小白求问这到底是什么原因?

2个回答

原因是高度不足,一般来讲,第一个一级菜单在页面上占了20像素高度,从21开始就是第二个一级了,你第一个一级菜单所属的二级菜单不是被挤下去了,还是在排版,只是被其他几个一级菜单盖住了。如果你用了浮动,及时清除浮动,如果没有,不要写高度就解决了

元素设置了固定高度后,元素内容过多时只会在文档流之外溢出显示。并不能撑开元素(ie6以前可以),元素在文档流中依然是设置的高度,元素下面的其它元素会与元素溢出的部分重叠显示。
高度改为百分比时又没这个问题了,是因为你设置的百分比并没有生效。元素要设置百分比生效,需要先设置 html, body {height: 100%;}

你可以改为设置min-height即可

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问

相似问题

5
有一个多层嵌套的列表 A = [1,2,[3,4,[‘434’,[…]]]],请写一段代码遍历A中的每个元素并打印出来
1
Vue-router的问题,使用路由嵌套的时候,为何子路由的内容不被渲染到router-view?
2
ScrollView嵌套RecyclerView导致RecyclerView加载的时候会初始化所有数据,Item无法复用的问题
2
使用jq中怎么拿到静态网页中嵌套的<script type="text/html"></script>标签中的其他控件控件
1
点击嵌套页面的返回顶部父级页面不动的问题?
0
关于Unity 可否嵌套其他软件的功能
1
java 如何把html嵌套标签和文字分组为数组
1
vue element-ui table多级表头嵌套的问题
7
python中,for循环通过if得到2个元素,如何获取下标最大的那个
2
oracle 函数嵌套的奇怪现象
1
嵌套Fragment,外层Fragment切换时,内层Fragment被回收,显示未空白
3
Springboot2.x + JPA,因嵌套事务导致的子方法事务不能回滚的问题?
1
Mybtias 发现极度尴尬的事情,实体类中嵌套一个实体类,嵌套的实体类再嵌套一个实体类数组,似乎无法用association 和 collection 依次表达,返回列会只有一个
1
WPF中ItemControl嵌套时数据绑定子元素wei'he绑定不到?
2
Recyclerview嵌套recyclerview的深坑,我坐在Recyclerview这个坑里很久了,仰望天空希望能把我拉上去。
1
python使用elementTree如何读取xml文件标签嵌套中的文本。
2
关于相对定位和绝对定位嵌套的问题,求解答
2
js 如何取到嵌套的json键值对的key?
3
如何求列表嵌套字典里的学生成绩的平均值
2
ssm中jsp里面跳转不了另一个jsp,link嵌套css也没有反应