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

最新推荐文章于 2024-05-22 12:50:00 发布
最新推荐文章于 2024-05-22 12:50:00 发布
阅读量711 收藏
点赞数
文章标签： javascript ui ViewUI
原文链接：http://www.cnblogs.com/JimmySeraph/p/11208017.html
版权

页面源码:

<!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="width: 550px; min-height: 100px; max-height: 600px; ">
            <div class="mini-fit" style="background: white; float: left; ">
                <table style="width: 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="width: 550px; min-height: 100px; max-height: 600px; ">
            <div style="background: white; float: left; ">
                <table style="width: 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",就好了.

转载于:https://www.cnblogs.com/JimmySeraph/p/11208017.html

track sun
关注
vue3 - 【完整源码】实现网页整屏大量图片、div 容器的自适应瀑布流布局，宽高度不固定的列表式瀑布流展示效果（高效无 BUG 网站瀑布流效果，超详细代码注释，可根据需求快速进行改造！）
高级前端工程师
05-10 5344
vue3瀑布流布局，vue3项目如何实现瀑布流布局，vue3瀑布流布局示例代码，vue3项目中列表容器高度不一致怎么排列，vue3中整个屏幕全是宽高不固定的图片列表怎么办，vue3网站瀑布流效果，Vue瀑布流(动态加载)，vue3网站实现瀑布流详细教程，Vue实现无限加载瀑布流，vue3项目中怎么实现整个屏幕的图片瀑布流布局，vue3实现整屏瀑布流布局效果插件组件，Vue3自适应瀑布流解决方案，vue3 最好用的瀑布流插件有哪些，Vue3 瀑布流实现，vue3+ts 移动端和pc端双端实现瀑布流，vue实现
IOS tableView自适应高度
征战无悔人生
11-01 7133
对tableView三种计算动态行高方法的分析tableView是一个神奇的东西，可以这么说，就算是一个初学者如果能把tableView玩的很6，那编一般的iOS的需求都问题不大了。tableView是日常开发中用烂了的控件，但是关于tableView中的自定义cell的动态行高，还是有一些玄机的。笔者本次主要是因为预估行高的方法的问题作为了一个契机顺带写了此文对几种动态行高方法的分析。旧方法现在常
miniui表格
loveLifeLoveCoding的博客
04-08 1762
如果muniui表格所需的 json数据格式返回正确，每个div所填的字段和返回的json数据字段对应，还是没有显示结果此时，应该查看 数据表格的 table高度是否设置过小。另外可以根据 f12点击表格内部，看看是否有内容，如果有，界面还是看不到，那就是表格的高度设置有问题，数据无法展示尝试两种设置方式 style="width:100%;height:100%;"  style="width...
miniui textarea 高度自适应
最新发布
hrcsdn13的博客
05-22 270
miniui textarea高度自适应
miniUi常用方法
zidieq的博客
05-13 1322
验证规则 onvalidation="onPhoneValidation" //身份证号验证规则 function onIDCardsValidation(e){ var exp = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; if (e.isValid) { if (!exp.test(e.value)) { e.errorText = "必须输入15~18位数字"; e.isVa
miniui自定义弹窗（mini.showMessageBox）
Hxuening的博客
01-12 3953
1.miniui自定义弹窗 （mini.showMessageBox） //自定义弹窗 mini.showMessageBox({ title: "请选择您要的饮品", buttons: ["白开水","咖啡","果汁","都不要"], html: "这里是tit
js 获取自适应高度div的高度
YinghaoGuo的博客
04-07 1万+
忙了将近一个月的论坛官网终于做好了，今天在调试bug，遇到了一个问题，设计稿（左）和实际（右）：         好了大家发现问题了吧，就是最下方的版权块定位问题，方案是在屏幕中最新回复数量少或者无回复时，屏幕无滚动，版权块在屏幕最下方，如果评论过多，则版权块距离最后一条考评论的margin-top是固定的80px，然候要虑到要金融各种屏幕大小的手机，如果用fixed定位是绝对不行的，因
html文本域 高度自适应,实现高度内容自适应的 textarea
weixin_39640573的博客
06-18 1587
背景介绍正如我们所知道的 textarea 是一个行内块元素 display: inline-block 并且它的默认宽高由 cols & rows 决定, 也就是说 textarea 的 height 并不会自适应于内容长度.那么, 我们今天的任务就是来思考如何创建一个 高度内容自适应的 textarea 组件，我将介绍三种思路实现 高度内容自适应的 textarea，具体代码 text...
软件测试bug文章,软件测试技术之说一个让你印象最深的bug？
weixin_42512183的博客
07-22 9128
本篇文章主要讲述软件测试技术之说一个让你印象最深的bug？，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。今天来聊一下测试面试必问题目：说一个让你印象最深的bug？被问到这个问题，如果面试者之前没有总结和准备过，会一下子被问懵逼，瞬间紧张起来，感觉不知所措……大致有以下几个场景：场景1：小白：(一脸懵逼)让我印象最深的bug？没有印象怎么办。。。面试官：没有印象？麻烦叫下下一...
jQuery MiniUI 开发教程 表单控件 表单：控件尺寸调整（四）
iteye_4698的博客
10-08 1776
[b]表单：控件尺寸调整[/b] [img]http://www.miniui.com/docs/api/images/diysize.gif[/img] 参考示例：[url=http://www.miniui.com/demo/form/form.html]表单：加载、保存[/url] [b]宽度调整[/b] 可以在style中直接设置： [b]高度调整[/b] 如果...
miniui自定义messageBox框
热门推荐
好好的专栏
07-26 1万+
miniui自定义MessageBox
datagrid动态修改宽度和高度
weixin_34313182的博客
04-23 2438
2019独角兽企业重金招聘Python工程师标准>>> ...
miniUI中弹出框问题
weixin_30514745的博客
06-09 2701
---恢复内容开始--- 设置页面弹出框并提交弹出框内容 弹出按钮 <a class="btn_color_1" onclick="onEdit(0)"> 新增</a> 弹出框 <div id="editWindow1" class="mini-window" title="新增企业" style="width:800px; height :600px;...
dataGrid的位置限定，使得自适应屏幕
hlxstc_xly的专栏
12-03 408
$(function(){ //初始化 initGrid(); $(window).resize(function() { resizeGrid(); }); resizeGrid(); }); function resizeGrid(){ var minHeight = 150; var minWidt
grid（datagrid、treegrid）自适应高度和宽度解决方法
amino77的专栏
11-18 8556
grid自适应高度 $(window).resize(function(){ $div.datagrid('resize', { // width:function(){return document.body.clientWidth;}, height:function(){return document.body.clientHeight;}, }); });
miniui-datagrid 根据条件合并动态行
qq_41063615的博客
01-22 5269
//根据相同的合同编号进行动态合并相同的值 function onLoadSchedule(e) {         var grid = e.sender;  var len = grid.data.length;         var i=0,num=1;        //定义数组        var marges=[];       for(i;i          
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值