无数经验,都是从教训中得来的
1.场景描述
有层级为3的一组div标签,class名分别为container、wrap、content
,需求是当盒子wrap
的高度大于盒子container
时,可以进行滚动。
但是此时盒子wrap
使用了一个全局css样式height:100%
,就是说此时container 、wrap
高度一致,需要将wrap
改为自适应高度(即内容盒子content
撑开的高度)
2.布局、样式
<template>
<div class="container">
<div class="global_css wrap">
这里是父元素
<div class="content">这里是子元素</div>
</div>
</div>
</template>
<style lang='scss' scoped>
// 假设这个是全局的属性css 不允许修改
.global_css {
height: 100%;
}
.container {
overflow: auto;
width: 700px;
height: 800px;
background-color: #ccc;
}
.wrap {
overflow: hidden;
margin: 0 auto;
}
.content {
box-sizing: border-box;
width: 100%;
// 内容元素高度很高很高
height: 2000px;
border: 1px solid red;
background-color: #eee;
}
</style>
3.解决办法
解决思路:取消设置height属性
那么该如何解决呢?
首先尝试的是: height:none; // 尝试无果
然后经过搜索发现一个解决办法: height:auto; // nice!!! 解决
// 解决办法
.wrap {
overflow: hidden;
margin: 0 auto;
// 添加属性,取消原有高度
height: auto;
}