Question

在我的容器中，有多个孩子，其中一个'div'被内容附加。

当容器（父）的总高度溢出时，我想将滚动条添加到div

可以通过css吗？

这是html：

<div id="container">
    <div>
        <h2>Heading</h2>
    </div>
    <div class="content">

    </div>
    <div class="footer">
        Footer
    </div>
</div>

<button>Add</button>

Js：

var p= "</p>Some testing text</p>";

$('button').click(function(){
    $('.content').append(p);
});

jsfiddle

更新

我不想将溢出到容器，如果是这样，我的footer将隐藏。我要求我的用户需要始终看到add按钮。我无法再次将{1}}的按钮放在container

的content之内

更新

我找到container的解决方案是否可以在不使用`js'的情况下制作？

jsSolution

Answer 1

是的，可以在CSS中完成。只需将此CSS规则添加到#container：

即可

overflow-y:scroll;

或者添加此项以仅在必要时显示滚动条：

overflow-y:auto;

Answer 2

http://jsfiddle.net/doesfmnm/2/

var p= "</p>Some testing text</p>";

$('button').click(function(){
    $('.content').append(p);
});

 .content{
    border:1px solid red;
    height:300px;
    width:200px;
    overflow-y:auto;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div>
        <h2>Heading</h2>
    </div>
    <div class="content">
        
    </div>
    <div class="footer">
        Footer
    </div>
</div>

<button>Add</button>

为@ Guy3000所说的内容添加更多解释。您将（后添加）附加到具有“内容”类的元素中。让我们考虑一下对于父.container类的意义。通过将内容添加到父级内部的div中，您的父级需要增长以补偿添加的内容，或者需要进行y轴滚动以允许内容长于 height 容器。

这意味着您可以通过向容器元素添加高度来解决您所面临的困境，或者您可以在容器上保持固定的高度并使具有y轴滚动条的框架包含添加的内容。

Answer 3

以下是我找到的解决方案：

<div id="container">
    <div id="up">Text<br />Text<br />Text<br /></div>
    <div id="down">
        <div class="content"></div>
    </div>
    <div class="misc"><button>Add</button></div>
</div>

css：

#container { width: 300px; height: 300px; border:1px solid red;display:table;}
#up { background: green;display:table-row;height:0; }
#down { background:pink;display:table-row; overflow-y:auto}
.misc {
    display:table-row;
    background:gray;
    height:30px;
}

.content {
    overflow:auto;
    height:100%;
}

Live

解决方案：

http://jsfiddle.net/doesfmnm/4/

如何将`scroll`栏添加到`div`，当它的高度为`auto`时

3 个答案: