zoukankan html css js c++ java

MiniUi遇到的一个Bug或者说坑,以div里面的内容自适应高度

页面源码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link href="css/demo.css" rel="stylesheet" type="text/css" />
        <script src="scripts/boot.js" type="text/javascript"></script>
        <link href="scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" />
        <link href="utf8-jsp/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
        <script type="text/javascript" src="utf8-jsp/third-party/jquery.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="utf8-jsp/umeditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="utf8-jsp/umeditor.min.js"></script>
        <script type="text/javascript" src="utf8-jsp/lang/zh-cn/zh-cn.js"></script>
        <style type="text/javascript">
        
        
        
        </style>
    </head>
    <body>
        
        <div id="test1" style=" 550px; min-height: 100px; max-height: 600px; ">
            <div class="mini-fit" style="background: white; float: left; ">
                <table style=" 500px; ">
                    <tr>
                        <td>
                            测试:
                        </td>
                        <td>
                            <div id="test2" style=""></div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        
        <a href="javascript: void(0);" id="div1a">1</a>
        <a href="javascript: void(0);" id="div2a">2</a>
        
        <div id="test3" style=" 550px; min-height: 100px; max-height: 600px; ">
            <div style="background: white; float: left; ">
                <table style=" 500px; ">
                    <tr>
                        <td>
                            测试2:
                        </td>
                        <td>
                            <div id="test4" style=""></div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        
        <a href="javascript: void(0);" id="div3a">1</a>
        <a href="javascript: void(0);" id="div4a">2</a>
        
        <script type="text/javascript">
            
            mini.parse();
            
            $("#div1a").on("click", function() {
                $("#test2").html("1234567890");
            });
            
            $("#div2a").on("click", function() {
                $("#test2").html(
                    "1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>"
                );
            });
            
            $("#div3a").on("click", function() {
                $("#test4").html("1234567890");
            });
            
            $("#div4a").on("click", function() {
                $("#test4").html(
                    "1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>"
                );
            });
            
        </script>
        
    </body>
</html>

页面默认效果(进入页面时不操作时):

分别点击1后效果:

分别点击2后效果:

两个div唯一的不同是,第一个有class="mini-fit",第二个没有.

所以,要自适应高度,去掉class="mini-fit",就好了.

2015年10月-2016年3月总计:5个月.
2016年11月-2017年6月总计:7个月.
2017年7月-2018年4月总计:9个月.
2018年5月-2018年5月总计:1个月.
2018年6月-2018年12月总计:6个月.
2019年1月-2019年12月总计11个月.
2020年2月-2021年2月总计13个月.
所有总计:5+7+9+1+6+11+13=52个月(4年4个月).
本人认同二元论.我是理想主义者,现实主义者,乐观主义者,有一定的完美主义倾向.不过,一直都是咸鱼(菜鸟),就算有机会,我也不想咸鱼翻身.(并不矛盾,因为具体情况具体分析)
英语,高等数学,考研,其他知识学习打卡交流QQ群:946556683

查看全文

相关阅读:
HDU1166：敌兵布阵（树状数组）
elasticsearch 7.4.0依赖
 IntelliJ IDEA手工安装插件方法
 Guava入门
 Maven添加Oracle驱动及依赖
 springboot整合netty（二）
MyBatis-Plus
「Chris Richardson 微服务系列」服务发现的可行方案以及实践案例
 spring initializr
String.Format( )用法

原文地址：https://www.cnblogs.com/JimmySeraph/p/11208017.html