实现div盒子的高度随页面内容增多而变化（自适应高度）效果

最新推荐文章于 2023-10-23 11:27:45 发布

Krlin_

最新推荐文章于 2023-10-23 11:27:45 发布

阅读量1w

点赞数 3

分类专栏：学习文章标签： css html js

本文链接：https://blog.csdn.net/weixin_46353030/article/details/118935722

版权

一、功能需求：

给三个div盒子，实现对处于中间的div盒子隐藏多余内容。此时配置一个show按钮，当点击show按钮后将被隐藏的内容显示出来，并令后一个div盒子向下移动适当距离。保持三个div盒子的布局。
在这里插入图片描述

二、实现核心

方法在于max-height属性、overflow属性和display:inline-block属性

三、具体实现：

对中间的div设置一个max-height高度+overflow:hidden属性+display:inline-block属性；
用js获取show按钮和处于中间的div盒子；
当点击show按钮时，将max-height修改为none，overflow修改为visible;
代码实现：

//css文件
.middle {
        display: inline-block;
        overflow: hidden;
        max-height: 200px;
        background-color: skyblue;
}
//js文件
var show = document.querySelector('.show');
    var middle = document.querySelector('.middle');
    show.onclick = function () {
        middle.style.overflow = 'visible';
        middle.style.maxHeight = 'none';
}

最终效果：
在这里插入图片描述
这里我用了include盒子装2号盒子，去掉include盒子也能实现布局不乱的效果，但是2号盒子的高度不会变。加个include盒子，使其高度设置为auto，此时include的高度就是随着2号盒子内容的变化而变化的了。

.include {
        width: 400px;
        height: auto;
        background-color: tan;
}

四、完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

最低0.47元/天解锁文章

Krlin_

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
实现div盒子的高度随页面内容增多而变化（自适应高度）效果

一、功能需求：给三个div盒子，实现对处于中间的div盒子隐藏多余内容。此时配置一个show按钮，当点击show按钮后将被隐藏的内容显示出来，并令后一个div盒子向下移动适当距离。保持三个div盒子的布局。二、实现核心方法在于max-height属性、overflow属性和display:inline-block属性三、具体实现：对中间的div设置一个max-height高度+overflow:hidden属性+display:inline-block属性；用js获取show按钮和处于中间
复制链接

扫一扫