如何使div的整个页面宽度和其他元素向下移动?

时间:2014-01-15 14:55:25

标签: c# html css asp.net-mvc css-position

我目前正在开发以下界面:

enter image description here

当用户点击公式时,窗格向下滑动以显示公式构建器(尚未实现),如下所示:

enter image description here

我想将此窗格从最左侧扩展到最右侧。当我试图使用position: absolute; left: 0; right: 0;时,它会伸展,但它下方的元素不会向下滑动并被掩盖。

如何让元素向左和向右延伸并使下面的元素不被覆盖?


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

4 个答案:

答案 0 :(得分:0)

div 的默认行为可从最左侧延伸到最右侧。

在您的情况下,周围的容器可能会应用一些marginpadding

答案 1 :(得分:0)

我添加了一个新的CSS类.page-width,其中我放置了不应从左到右拉伸的元素,但是应用了边距。公式设计器未包含在具有该类的<div>中,因此它会在整个体宽范围内延伸。

试试这个:

http://jsfiddle.net/6SqaQ/4/

你可能需要做一些微调,但你明白了。

答案 2 :(得分:0)

继续发表评论后,首先将其添加到您的标记中:

<div id="content">
    <div class="top">
        content above the formula builder
    </div>
    <div class="ui-formula-designer-container">
    ....formula builder goes here.....
    </div>
    <div class="bottom">
        content below the formula builder
    </div>
</div>

从CSS中删除此填充:

#content {
    padding: 25px;
}

然后添加此(或您需要的尺寸):

.top, .bottom {
    padding: 25px;
}

http://jsfiddle.net/6SqaQ/2/

希望这有帮助。

答案 3 :(得分:0)

使用此link作为参考。我能够通过以下CSS完成此任务:

.ui-formula-designer-container{
    position: relative;
}

.ui-formula-designer:before, .ui-formula-designer:after{
    content: " ";
    width: 100%;
    background-color: #444;
    position: absolute;
    top: 0;
    bottom: 0;
}
.ui-formula-designer:before{
    left: 100%;
}

.ui-formula-designer:after{
    right: 100%;
}

JsFiddle