Question

最初发布在SalesForce Stack Exchange上。

这是我的Visual Force页面中用于销售人员的代码的片段。

<div
                class="slds-col slds-size_1-of-1 slds-medium-size_1-of-1 slds-large-size_1-of-3 slds-box slds-text-heading_small slds-theme_shade slds-p-bottom_medium"
                style="Height:195px">
                <div class="slds-text-align_center slds-m-top_x-large">
                    Non-UK Residents Will Be Required To Produce Evidence Of Their
                    Current Status <br /> (Passport Or Other Official Documentation
                    e.g. Visa Details)
                </div>
            </div>
            <div class="slds-col slds-large-size_5-of-6 slds-box slds-theme_shade"
                style="Height:350px">
                <div class="slds-text-heading_small slds-box_xx-small">Personal
                    Needs</div>
                <div
                    class="slds-grid slds-wrap slds-text-title slds-align_absolute-center">
                    <div class="slds-box">
                        <b> Disability Or Health Issues:- </b>
                        <div class="slds-form-element">
                            <div class="slds-form-element__control">
                                <apex:inputField value="{!Apprentice__c.Recorded_Disabilities__c}" />
                            </div>
                        </div>
                    </div>
                    <div class="slds-box">
                        <b> Learning Difficulties:- </b>
                        <div class="slds-form-element">
                            <div class="slds-form-element__control">
                                <apex:inputField value="{!Apprentice__c.Learning_Difficulties__c}" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="slds-col slds-large-size_1-of-6 slds-box slds-theme_shade"
                style="height: 350px;">
                <div class="slds-text-heading_small slds-text-align_center slds-box_xx-small">If you have selected any of the 'Other' needs. Please provide further details below:-</div>
                <div
                    class="slds-grid slds-wrap slds-text-title slds-align_absolute-center">
                    <apex:inputTextArea value="{! Apprentice__c.Other_Disabilities__c}" style="width:100%; height:250px;"/>
                </div>
            </div>

我想要的是我的页面可以在较小的屏幕上正确显示，它可以在普通显示器上运行，但是如果我缩小页面，则会出现高度问题，这会破坏它的外观。我当前正在使用Height：--- px，并且尝试了Height：---％也不行。

这是它在全尺寸显示器上的外观。

Working Sizing

但是一旦我缩小窗口大小，多重选择列表就会从容器中出来。如何使它停留在框的区域中？如何仅在屏幕尺寸较小时使框的高度增加？

Broken Sizing

此处有同一问题：-

Working Layout Broken Layout

谢谢您的帮助

制作视觉力页面。是否需要建议以根据屏幕尺寸动态调整？

0 个答案: