Question

我们有一个模态窗口（div），它被分成两个带有垂直边框的部分 - <div class="border"></div>，带有以下CSS：

.modal-body {
    padding: 0px 15px;
}

.modal-body-left,
.modal-body-right {
    float: left;
    width: 381px;
    padding: 0px 0px 15px;
}

.border {
    border-left: 3px solid black;
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 0px;
    left: 396px;
}

.modal-body-right {
    margin-left: 15px;
}

垂直线非常适合父div，但问题是 - 如果父div非常高并且有一个垂直滚动条，则垂直线会滚动滚动条。我们如何防止它滚动（或将其高度更改为父div的全高）？我们不想在右侧或左侧区域放置边框，因为它们的高度可能不同，我们希望垂直边框覆盖其父级的整个高度。

编辑：这是HTML（内容是动态的）：

<div class="modal hide fade" id="...">
    <div class="modal-header">
        ...
    </div>
    <div class="modal-body">
        <form method="post" id="...">
            <div class="modal-body-left">
                <h4>...</h4>
                <div class="line-div">
                    <label class="modal-label">...</label>
                    <div class="modal-div">...</div>
                </div>
                <div class="line-div">
                    <label class="modal-label">...</label>
                    <div class="modal-div">...</div>
                </div>
                <div class="line-div">
                    <label class="modal-label">...</label>
                    <div class="modal-div">...</div>
                </div>
                <div class="line-div">
                    <label class="modal-label">...</label>
                    <div class="modal-div">...</div>
                </div>
            </div>
            <div class="border"></div>
            <div class="modal-body-right">
                <h4>...</h4>
                <div class="line-div">
                    <label class="modal-label">...</label>
                    <div class="modal-div">...</div>
                </div>
                <div class="line-div">
                    <label class="modal-label">...</label>
                    <div class="modal-div">...</div>
                </div>
                <div class="line-div">
                    <label class="modal-label">...</label>
                    <div class="modal-div">...</div>
                </div>
                <div class="line-div">
                    <label class="modal-label">...</label>
                    <div class="modal-div">...</div>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        ...
    </div>
</div>

Answer 1

使用CSS overflow属性

.modal-body{
    height:300px;//your prefered value
    width:300px;//your prefered value    
    overflow:auto;
}

DEMO

Answer 2

您可能对CSS overflow感兴趣。例如，选择值：auto将仅在内容过大时显示滚动条。

停止滚动垂直线

2 个答案: