layui step 高度自适应

Question

如果父div 没法设置height（因为是步骤表单，里面的内容高度是不确定的，有的比如500px，有点是动态的1000到1500px之间）,然后里面的步骤表单又必须设置height 比如layui.step那个 如果组件设置height:100%的话又不显示（除非设置父类div高度），设置auto的话也是不显示
如解决问题，必有偿 。困扰了好多天了

这个

  //  步骤条配置
    layui.config({
        base: './step-lay/'
    }).use(['form', 'step'], function ()
    {
        var $ = layui.$,
            form = layui.form,
            step = layui.step;
        // 获取 URL 参数中的当前步骤索引值
        var urlParams = new URLSearchParams(window.location.search);
        var currentStep = parseInt(urlParams.get('step')) || 0;

        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%',
            stepWidth: '92%',
            height: '100%',
            stepItems: [
                {title: '阅读须知'},
                {title: '填写信息'},
                {title: '上传材料'},
                {title: '结果领取'},
                {title: '申请成功'}
            ],

            // 设置当前步骤
            step: currentStep,
            // 监听步骤切换事件
            stepChange: function (currentStepIndex) {
                // 更新 URL 参数中的当前步骤索引值
                updateUrlParams(currentStepIndex);
            }
        });
        form.on('submit(formStep)', function (data) {
            step.next('#stepForm');
            return false;
        });

        form.on('submit(formStep2)', function (data) {
            step.next('#stepForm');
            return false;
        });
        $('.pre').click(function () {
            step.pre('#stepForm');
        });

        $('.next').click(function () {
            step.next('#stepForm');
        });

        // 更新 URL 参数中的当前步骤索引值
        function updateUrlParams(currentStepIndex) {
            var url = new URL(window.location.href);
            url.searchParams.set('step', currentStepIndex.toString());
            var newUrl = url.toString();
            window.history.replaceState({path: newUrl}, '', newUrl);
        }
    });

Answer 1

参考通义千问和郭老师的小迷弟雅思莫了-编写提供，主要是为了帮助您快速解决问题，如下回答，您可以参考下，如有问题，评论区留言。

Layui Step 组件本身并不支持高度自适应，它需要一个固定的高度来展示内容。但是您可以采用以下方法来实现类似的效果：

1. 将父容器（包含layui.step的div）设置为position: relative;。

2. 对于Step组件，可以尝试将其包裹在一个子div中，并对这个子div设置如下CSS样式：

#stepFormContent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto; /* 添加滚动条以容纳过长的内容 */
}

然后修改JS部分，渲染step到这个新创建的子div上：

//...
var $ = layui.$,
    form = layui.form,
    step = layui.step;

// 创建并初始化步骤表单内容区域
var stepFormContent = $('<div id="stepFormContent"></div>').appendTo('#stepForm');
stepFormContent.css({
    'position': 'absolute',
    'top': 0,
    'left': 0,
    'right': 0,
    'bottom': 0,
    'overflow-y': 'auto'
});

//...
step.render({
    // ...
    elem: '#stepFormContent', // 更改为指向新的子div
    height: '100%', // 保持height: 100%
    // ...
});
//...

通过这种方法，您的步骤表单内容将自动填充其父容器，并在内容超出时显示滚动条。但请注意，这种方式可能需要您针对不同步骤的具体内容动态调整内部元素的布局和样式，以确保在任何高度下都能正常展示。