我这个页面使用mini-fit,总是无法达到100%,填充页面

cuiyuanyuan

<div class="mini-fit">
                <div style="width: 100%; height: 100%">
                    <div style="font-weight: bold; text-align: left; padding-top: 3px; vertical-align: middle; padding-bottom: 2px; padding-left: 3px;">
                        概况:
                    </div>
                    <div style="width: 99%; text-align: left; font-family: 'Microsoft YaHei'; vertical-align: middle; font-weight: bold; font-size: 14px; padding-top: 3px; padding-left: 3px;">
                        <input  class="mini-textbox" emptytext="请填写标题，最大100字" borderstyle="border-color:#c0c0c3" vtype="maxLength:100" style="width: 100%; color: black; vertical-align: middle;" />
                    </div>
                    <div style="font-weight: bold; text-align: left; margin-top: 3px; padding-top: 3px; padding-left: 2px;">
                        值班记录:
                    </div>
                    <div class="mini-fit">
                        <div  style="width: 99%; height: 100%; padding-left: 5px; padding-right: 1px; border: 0px solid #A5ACB5; margin-left: 1px;">
                            <div style="width: 100%; height: 100%">
                                <div style="width: 35%; float: left; text-align: left; margin-top: 6px;">
                                    本班次起始时间：<label ></label>
                                </div>
                                <div style="width: 35%; float: left; text-align: left; margin-top: 3px; vertical-align: middle;">
                                    天气情况：<input  class="mini-combobox" borderstyle="border-color:#c0c0c3" style="vertical-align: middle;" textfield="text" valuefield="id" allowinput="false" shownullitem="false" />
                                </div>
                                <div style="width: 30%; float: left; text-align: left; margin-top: 6px;">
                                    值班时间：<label></label>
                                </div>
                                <div style="width: 35%; clear: both; float: left; text-align: left; margin-top: 6px;">
                                    本班次结束时间：<label></label>
                                </div>
                                <div style="width: 35%; float: left; text-align: left; margin-top: 6px;">
                                    值班人：<label></label>
                                </div>
                                <div style="width: 30%; float: left; text-align: left; margin-top: 6px;">
                                    交班时间：<label></label>
                                </div>
                                <div style="clear: both"></div>
                                <div style="vertical-align: middle; float: left; width: 20%; margin-top: 12px;">事件值班时间记录：</div>
                                <div style="vertical-align: middle; float: right; text-align: right; padding-right: 5px; width: 55%; margin-top: 3px; margin-bottom: 3px;">
                                    <a class="mini-button"  style="width: 67px; height: 20px; font-family: 'Microsoft YaHei'; vertical-align: middle">添加事件</a>
                                </div>
                                <div class="mini-fit" style="clear: both;">
                                    <div style="height: 100%; width: 100%; clear: both;">

                                        <div class="mini-datagrid" showheader="false" borderstyle="border-color:#c0c0c3" showpager="false" allowcelledit="true" allowcellselect="true" multiselect="true" style="width: 100%; height: 100%" >
                                            <div property="columns">
                                                <div field="RecEveOccurrenceTime" headeralign="center" displayfield="RecEveOccurrenceTime" align="center">
                                                    时间
                      </div>
                                                <div field="RecEveEventDetail" headeralign="center" align="center">
                                                    值班情况

                                                </div>
                                                <div headeralign="center" align="center" renderer="sr_SRSchedulRecordDutyDGOperationFormat">操作</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="clear: both; margin-top: 6px;">备  注：</div>
                                <div style="width: 100%; text-align: left; margin-top: 6px;">
                                    <textarea class="mini-textarea" borderstyle="border-color:#c0c0c3" style="width: 100%; height: 100%"></textarea>
                                </div>
                                <div style="width: 20%; padding-top: 5px; text-align: left; float: left;">
                                    <a class="mini-button"  style="width: 67px; height: 20px; font-family: 'Microsoft YaHei';">去交班</a>
                                </div>
                                <div style="width: 70%; padding-top: 5px; text-align: right; float: right;">
                                    <a class="mini-button"  style="width: 60px; height: 20px; font-family: 'Microsoft YaHei';">保存</a>
                                    <a class="mini-button "  style="width: 60px; height: 20px; font-family: 'Microsoft YaHei';">返回</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

dforce

mini-fit根据兄弟元素的高度计算父元素剩余高度
你把块级元素并排导致计算错误
请优化你的布局

cuiyuanyuan

dforce 发表于 2015-9-30 13:55
mini-fit根据兄弟元素的高度计算父元素剩余高度
你把块级元素并排导致计算错误
请优化你的布局 ...

按照你说的，改了以后，有了很大改善，但是界面还有一点点长，帮忙看一下，是哪一块的原因

<div style="width: 100%;">
                <div style="font-weight: bold; text-align: left; padding-top: 3px; vertical-align: middle; padding-bottom: 2px; padding-left: 3px;">
                    概况:
                </div>
                <div style="width: 99%; text-align: left; font-family: 'Microsoft YaHei'; vertical-align: middle; font-weight: bold; font-size: 14px; padding-top: 3px; padding-left: 3px;">
                    <input id="sr_SRSchedulRecordDutyTx" class="mini-textbox" emptytext="请填写标题，最大100字" borderstyle="border-color:#c0c0c3" vtype="maxLength:100" style="width: 100%; color: black; vertical-align: middle;" />
                </div>
                <div style="font-weight: bold; text-align: left; margin-top: 3px; padding-top: 3px; padding-left: 2px;">
                    值班记录:
                </div>
            </div>
            <div id="sr_SRSchedulRecordDutyContent" style="width: 99%; padding-left: 5px; padding-right: 1px; border: 0px solid #A5ACB5; margin-left: 0px;">
                <div style="width: 100%; height: 100%">
                    <div style="width: 35%; float: left; text-align: left; margin-top: 6px;">
                        本班次起始时间：<label class="sr_SRSchedulRecordDutyStartTime" id="sr_SRSchedulRecordDutyStartTime"></label>
                    </div>
                    <div style="width: 35%; float: left; text-align: left; margin-top: 3px; vertical-align: middle;">
                        天气情况：<input id="sr_SRSchedulRecordDutyWC" class="mini-combobox" borderstyle="border-color:#c0c0c3" style="vertical-align: middle;" textfield="text" valuefield="id" allowinput="false" shownullitem="false" />
                    </div>
                    <div style="width: 30%; float: left; text-align: left; margin-top: 6px;">
                        值班时间：<label class="sr_SRSchedulRecordDutyRealTime"></label>
                    </div>
                    <div style="width: 35%; clear: both; float: left; text-align: left; margin-top: 6px;">
                        <label class="sr_SRSchedulRecordDutyEndTime" id="sr_SRSchedulRecordDutyEndTime"></label>
                    </div>
                    <div style="width: 35%; float: left; text-align: left; margin-top: 6px;">
                        值班人：<label class="sr_SRSchedulRecordDutyPerson"></label>
                    </div>
                    <div style="width: 30%; float: left; text-align: left; margin-top: 6px;">
                        交班时间：<label class="sr_SRSchedulRecordDutyShiftTime"></label>
                    </div>
                    <div style="clear: both"></div>
                    <div style="vertical-align: middle; float: left; width: 20%; margin-top: 12px;">事件值班时间记录：</div>
                    <div style="vertical-align: middle; float: right; text-align: right; padding-right: 5px; width: 55%; margin-top: 3px; margin-bottom: 3px;">
                        <a class="mini-button sr_SRSchedulRecordDutyNewBtn" id="sr_SRSchedulRecordDutyNewBtn" style="width: 67px; height: 20px; font-family: 'Microsoft YaHei'; vertical-align: middle">添加事件</a>
                    </div>
                </div>
            </div>
            <div class="mini-fit" style="clear: both; text-align:center;width:100%" id="sr_SRSchedulRecordDutyContentEvent">
                <div class="mini-datagrid" showheader="false" borderstyle="border-color:#c0c0c3" showpager="false" allowcelledit="true" allowcellselect="true" multiselect="true" style="width: 99%;margin-left:5px; height: 100%" id="sr_SRSchedulRecordDutyDG">
                    <div property="columns">
                        <div field="RecEveOccurrenceTime" headeralign="center" displayfield="RecEveOccurrenceTime" align="center">
                            时间
                                <input property="editor" grid="#sr_SRSchedulRecordDutyConfigDataGrid" id="sr_SRSchedulRecordDutyConfigSTLU" class="mini-lookup" style="width: 100%;" popupwidth="auto"
                                    popup="#sr_SRSchedulRecordDutyConfigPanel" textvalue="RecEveOccurrenceTime" />
                        </div>
                        <div field="RecEveEventDetail" headeralign="center" align="center">
                            值班情况
                                <input property="editor" class="mini-textbox" style="width: 100%;" minwidth="10" />
                        </div>
                        <div headeralign="center" align="center" renderer="sr_SRSchedulRecordDutyDGOperationFormat">操作</div>
                    </div>
                </div>
            </div>
            <div style="clear: both; margin-top: 6px;">备  注：</div>
            <div style="width: 100%; text-align: left; margin-top: 6px;">
                <textarea class="mini-textarea" id="sr_SRSchedulRecordDutyRemark" borderstyle="border-color:#c0c0c3" style="width: 100%;"></textarea>
            </div>
            <div style="width: 20%; padding-top: 5px; text-align: left; float: left;">
                <a class="mini-button sr_SRSchedulRecordDutyShiftBtn" id="sr_SRSchedulRecordDutyShiftBtn" style="width: 67px; height: 20px; font-family: 'Microsoft YaHei';">去交班</a>
            </div>
            <div style="width: 70%; padding-top: 5px; text-align: right; float: right;">
                <a class="mini-button sr_SRSchedulRecordDutySaveBtn" id="sr_SRSchedulRecordDutySaveBtn" style="width: 60px; height: 20px; font-family: 'Microsoft YaHei';">保存</a>
                <a class="mini-button sr_SRSchedulRecordDutyReturnBtn" id="sr_SRSchedulRecordDutyReturnBtn" style="width: 60px; height: 20px; font-family: 'Microsoft YaHei';">返回</a>
            </div>

cuiyuanyuan

dforce 发表于 2015-9-30 13:55
mini-fit根据兄弟元素的高度计算父元素剩余高度
你把块级元素并排导致计算错误
请优化你的布局 ...

人还在吗？我的问题看到了吗？

dforce

cuiyuanyuan 发表于 2015-9-30 15:48
按照你说的，改了以后，有了很大改善，但是界面还有一点点长，帮忙看一下，是哪一块的原因

表单那块用table做吧，有float,margin
http://www.miniui.com/demo/#src=formLayout/formLayout.html

cuiyuanyuan

dforce 发表于 2015-9-30 16:23
表单那块用table做吧，有float,margin
http://www.miniui.com/demo/#src=formLayout/formLayout.html ...

你意思是<div id="sr_SRSchedulRecordDutyContent" style="width: 99%; padding-left: 5px; padding-right: 1px; border: 0px solid #A5ACB5; margin-left: 0px;">
                <div style="width: 100%; height: 100%">
                    <div style="width: 35%; float: left; text-align: left; margin-top: 6px;">
                        本班次起始时间：<label class="sr_SRSchedulRecordDutyStartTime" id="sr_SRSchedulRecordDutyStartTime"></label>
                    </div>
                    <div style="width: 35%; float: left; text-align: left; margin-top: 3px; vertical-align: middle;">
                        天气情况：<input id="sr_SRSchedulRecordDutyWC" class="mini-combobox" borderstyle="border-color:#c0c0c3" style="vertical-align: middle;" textfield="text" valuefield="id" allowinput="false" shownullitem="false" />
                    </div>
                    <div style="width: 30%; float: left; text-align: left; margin-top: 6px;">
                        值班时间：<label class="sr_SRSchedulRecordDutyRealTime"></label>
                    </div>
                    <div style="width: 35%; clear: both; float: left; text-align: left; margin-top: 6px;">
                        <label class="sr_SRSchedulRecordDutyEndTime" id="sr_SRSchedulRecordDutyEndTime"></label>
                    </div>
                    <div style="width: 35%; float: left; text-align: left; margin-top: 6px;">
                        值班人：<label class="sr_SRSchedulRecordDutyPerson"></label>
                    </div>
                    <div style="width: 30%; float: left; text-align: left; margin-top: 6px;">
                        交班时间：<label class="sr_SRSchedulRecordDutyShiftTime"></label>
                    </div>
                    <div style="clear: both"></div>
                    <div style="vertical-align: middle; float: left; width: 20%; margin-top: 12px;">事件值班时间记录：</div>
                    <div style="vertical-align: middle; float: right; text-align: right; padding-right: 5px; width: 55%; margin-top: 3px; margin-bottom: 3px;">
                        <a class="mini-button sr_SRSchedulRecordDutyNewBtn" id="sr_SRSchedulRecordDutyNewBtn" style="width: 67px; height: 20px; font-family: 'Microsoft YaHei'; vertical-align: middle">添加事件</a>
                    </div>
                </div>
            </div>
这一块的原因吗

dforce

cuiyuanyuan 发表于 2015-9-30 16:29
你意思是
               
                    

是
最下面2块也有问题，mini-fit计算的时候同级块级元素都会计算，你用float控制并排的会重复计算

cuiyuanyuan

dforce 发表于 2015-9-30 16:36
是
最下面2块也有问题，mini-fit计算的时候同级块级元素都会计算，你用float控制并排的会重复计算 ...

全部改成table,依然有那个问题

cuiyuanyuan

dforce 发表于 2015-9-30 16:36
是
最下面2块也有问题，mini-fit计算的时候同级块级元素都会计算，你用float控制并排的会重复计算 ...

<div style="font-weight: bold; text-align: left; padding-top: 3px; vertical-align: middle; padding-bottom: 2px; padding-left: 3px;">
                概况:
            </div>
            <div style="width: 99%; text-align: left; font-family: 'Microsoft YaHei'; vertical-align: middle; font-weight: bold; font-size: 14px; padding-top: 3px; padding-left: 3px;">
                <input id="sr_SRSchedulRecordDutyTx" class="mini-textbox" emptytext="请填写标题，最大100字" borderstyle="border-color:#c0c0c3" vtype="maxLength:100" style="width: 100%; color: black; vertical-align: middle;" onfocus="sr_SRSchedulRecordDutyTxFocus(e);" onblur="sr_SRSchedulRecordDutyTxBlur(e);" />
            </div>
            <div style="font-weight: bold; text-align: left; margin-top: 3px; padding-top: 3px; padding-left: 2px;">
                值班记录:
            </div>
            <div id="sr_SRSchedulRecordDutyContent" style="width: 99%; padding-left: 5px; padding-right: 1px; border: 0px solid #A5ACB5; margin-left: 1px;">
                <table style="width: 100%; height: 100%">
                    <tr>
                        <td style="width: 35%; text-align: left; vertical-align: middle;">
                            本班次起始时间：<label class="sr_SRSchedulRecordDutyStartTime" id="sr_SRSchedulRecordDutyStartTime"></label>
                        </td>
                        <td style="width: 35%; text-align: left; vertical-align: middle;">
                            天气情况：<input id="sr_SRSchedulRecordDutyWC" class="mini-combobox" borderstyle="border-color:#c0c0c3" style="vertical-align: middle;" textfield="text" valuefield="id" allowinput="false" shownullitem="false" />
                        </td>
                        <td style="width: 30%; text-align: left; vertical-align: middle;">
                            值班时间：<label class="sr_SRSchedulRecordDutyRealTime"></label>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 35%;  text-align: left; vertical-align: middle;">
                            <label class="sr_SRSchedulRecordDutyEndTime" id="sr_SRSchedulRecordDutyEndTime"></label>
                        </td>
                        <td  style="width: 35%; text-align: left;vertical-align: middle;">
                            值班人：<label class="sr_SRSchedulRecordDutyPerson"></label>
                        </td>
                        <td  style="width: 30%; text-align: left; vertical-align: middle;">
                            交班时间：<label class="sr_SRSchedulRecordDutyShiftTime"></label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            事件值班时间记录：
                        </td>
                        <td colspan="2" style="text-align:right;margin-right:5px;">
                            <a class="mini-button sr_SRSchedulRecordDutyNewBtn" id="sr_SRSchedulRecordDutyNewBtn" style="width: 67px; height: 20px; font-family: 'Microsoft YaHei'; vertical-align: middle">添加事件</a>
                        </td>
                    </tr>
                  
                </table>
            </div>
            <div class="mini-fit"  id="sr_SRSchedulRecordDutyContentEvent">
                <div class="mini-datagrid" showheader="false" borderstyle="border-color:#c0c0c3" showpager="false" allowcelledit="true" allowcellselect="true" multiselect="true" style="width: 99%;margin-left:5px; height: 100%" id="sr_SRSchedulRecordDutyDG">
                    <div property="columns">
                        <div field="RecEveOccurrenceTime" headeralign="center" displayfield="RecEveOccurrenceTime" align="center">
                            时间
                                <input property="editor" grid="#sr_SRSchedulRecordDutyConfigDataGrid" id="sr_SRSchedulRecordDutyConfigSTLU" class="mini-lookup" style="width: 100%;" popupwidth="auto"
                                    popup="#sr_SRSchedulRecordDutyConfigPanel" textvalue="RecEveOccurrenceTime" onshowpopup="sr_SRSchedulRecordDutyConfigShowPopup" onhidepopup="sr_SRSchedulRecordDutyConfigHidePopup" />
                        </div>
                        <div field="RecEveEventDetail" headeralign="center" align="center">
                            值班情况
                                <input property="editor" class="mini-textbox" style="width: 100%;" minwidth="10" />
                        </div>
                        <div headeralign="center" align="center" renderer="sr_SRSchedulRecordDutyDGOperationFormat">操作</div>
                    </div>
                </div>
            </div>
            <div style="margin-left:5px; margin-top: 6px;">备&nbsp;&nbsp;注：</div>
            <div style="width: 99%;margin-left:5px; text-align: left; margin-top: 6px;">
                <textarea class="mini-textarea" id="sr_SRSchedulRecordDutyRemark" borderstyle="border-color:#c0c0c3" style="width: 100%;"></textarea>
            </div>
            <table style="width: 100%;">
                <tr>
                    <td style="margin-left: 5px; text-align: left; margin-left: 5px;">
                        <a class="mini-button sr_SRSchedulRecordDutyShiftBtn" id="sr_SRSchedulRecordDutyShiftBtn" style="width: 67px; height: 20px; font-family: 'Microsoft YaHei';">去交班</a>
                    </td>
                    <td style="margin-right: 5px; text-align: right; margin-right: 5px;">
                        <a class="mini-button sr_SRSchedulRecordDutySaveBtn" id="sr_SRSchedulRecordDutySaveBtn" style="width: 60px; height: 20px; font-family: 'Microsoft YaHei';">保存</a>
                        <a class="mini-button sr_SRSchedulRecordDutyReturnBtn" id="sr_SRSchedulRecordDutyReturnBtn" style="width: 60px; height: 20px; font-family: 'Microsoft YaHei';">返回</a>
                    </td>
                </tr>
            </table>

felt

cuiyuanyuan 发表于 2015-9-30 16:58
概况:
            
            

没发现什么问题，可以撑满