OOjs-ui开发：PageLayout高度过短问题求助

问题详情 #

我在用OOjs-UI开发游戏，创建的PageLayout高度只适配内部的小标题（没限制max-height，height设为auto）。试过添加BFC，但height设为auto时完全没效果。

原代码 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/oojs-ui/0.51.2/oojs-ui-wikimediaui.css" rel="stylesheet"/>
<div class="oo-ui-layout oo-ui-panelLayout oo-ui-panelLayout-scrollable oo-ui-panelLayout-expanded oo-ui-pageLayout" style="display: flow-root; position: static;">
    <fieldset class="oo-ui-layout oo-ui-labelElement oo-ui-fieldsetLayout">
        <legend class="oo-ui-fieldsetLayout-header"><span class="oo-ui-iconElement-icon oo-ui-iconElement-noIcon"></span><span class="oo-ui-labelElement-label">Demo a title of a fieldset</span></legend>
        <div class="oo-ui-fieldsetLayout-group">
            <div class="oo-ui-layout oo-ui-panelLayout oo-ui-panelLayout-expanded" style="display: grid;">
                <div class="oo-ui-layout oo-ui-panelLayout oo-ui-panelLayout-padded oo-ui-panelLayout-expanded oo-ui-panelLayout-framed" style="display: flow-root; position: static; align-self: center;"><label class="oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement oo-ui-labelElement-label oo-ui-labelWidget" style="font-size: 5mm;">Demo title of a panel</label><br><span class="oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-framed oo-ui-iconElement oo-ui-labelElement oo-ui-flaggedElement-progressive oo-ui-flaggedElement-primary oo-ui-buttonWidget"><a class="oo-ui-buttonElement-button" role="button" tabindex="0" rel="nofollow"><span class="oo-ui-iconElement-icon oo-ui-icon-imageGallery oo-ui-image-invert"></span><span class="oo-ui-labelElement-label">Demo button</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator oo-ui-image-invert"></span></a></span></div>
            </div>
        </div>
    </fieldset>
</div>

解决办法 #

• 排查OOjs-UI原生样式：oo-ui-panelLayout-scrollable类默认可能设置了overflow: auto，但如果容器没有足够高度，滚动条不会触发，导致高度收缩。可以先查看这些类的CSS规则，确认是否有min-height或height的限制。
• 换一种BFC实现方式：把最外层PageLayout的display: flow-root改成overflow: auto，同时保留height: auto。overflow: auto同样能创建BFC，还能在内容超出时自动显示滚动条，避免高度塌陷。
• 调整子元素对齐：去掉内部面板的align-self: center，改成align-self: stretch，让子元素撑满父容器的高度，这样父容器的高度会跟着子元素内容自适应。
• 强制基础高度：如果需要容器占满视口，给最外层PageLayout加min-height: 100vh；如果是嵌套在其他容器里，加min-height: 100%，确保容器有基础高度后再自适应内容。

修改后的示例代码 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/oojs-ui/0.51.2/oojs-ui-wikimediaui.css" rel="stylesheet"/>
<div class="oo-ui-layout oo-ui-panelLayout oo-ui-panelLayout-scrollable oo-ui-panelLayout-expanded oo-ui-pageLayout" style="overflow: auto; position: static; min-height: 100vh;">
    <fieldset class="oo-ui-layout oo-ui-labelElement oo-ui-fieldsetLayout">
        <legend class="oo-ui-fieldsetLayout-header"><span class="oo-ui-iconElement-icon oo-ui-iconElement-noIcon"></span><span class="oo-ui-labelElement-label">Demo a title of a fieldset</span></legend>
        <div class="oo-ui-fieldsetLayout-group">
            <div class="oo-ui-layout oo-ui-panelLayout oo-ui-panelLayout-expanded" style="display: grid;">
                <div class="oo-ui-layout oo-ui-panelLayout oo-ui-panelLayout-padded oo-ui-panelLayout-expanded oo-ui-panelLayout-framed" style="display: flow-root; position: static; align-self: stretch;"><label class="oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement oo-ui-labelElement-label oo-ui-labelWidget" style="font-size: 5mm;">Demo title of a panel</label><br><span class="oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-framed oo-ui-iconElement oo-ui-labelElement oo-ui-flaggedElement-progressive oo-ui-flaggedElement-primary oo-ui-buttonWidget"><a class="oo-ui-buttonElement-button" role="button" tabindex="0" rel="nofollow"><span class="oo-ui-iconElement-icon oo-ui-icon-imageGallery oo-ui-image-invert"></span><span class="oo-ui-labelElement-label">Demo button</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator oo-ui-image-invert"></span></a></span></div>
            </div>
        </div>
    </fieldset>
</div>

内容的提问来源于stack exchange，提问作者佩奇君