c# - 如何使div整个页面宽度并将其他元素向下移动？

Question

我目前正在处理以下界面:

当用户点击公式时， Pane 会向下滑动以显示公式生成器(尚未实现)，如下所示:

我想将此 Pane 从最左侧扩展到最右侧。当我尝试使用 position: absolute;左:0； right: 0; 它会拉伸(stretch)，但它下面的元素不会向下滑动并被覆盖。

如何让元素向左和向右跨越并防止下面的元素被覆盖？

---

HTML

<div class="editor-label">
       <label for="Calculator_Formula">Formula:</label>
    </div>

    <div class="editor-field">
    
    <span class="calculator-formula">
        <a href="#" class="solid-link" onclick=" $('.ui-formula-designer').slideDown('slow'); return false; ">(rrb * (currentValue + iv) - (hcv * homestead) - (mcv * military)) * levy</a>
    </span>
    
    <span class="field-validation-valid" data-valmsg-for="Calculator.Formula" data-valmsg-replace="true"></span>
    
    <div class="ui-formula-designer-container">
        <div class="ui-formula-designer" style="height: 100%; width: 100%; background-color: rgb(68, 68, 68);">
            <div class="designer" style="height: 150px;"></div>
            <div class="toolbox" style="height: 150px;"></div>
        </div>
    </div>
</div>

---

Rough Fiddler

Answer 1

div 的默认行为是从最左边拉伸(stretch)到最右边。

在您的情况下，周围的容器可能应用了一些 margin 或 padding。