Question

我有一个div（frame_outer），其中包含另一个div（frame_inner），里面有动态内容。我想要的是frame_outer自动扩展它的高度，直到它达到frame_inner的高度或它自己的最大高度。

值得一提的是，我首先拥有frame_outer的原因是因为有时候我希望frame_inner的内容水平扩展而不会吹出页面的一侧（因此overflow:auto在frame_outer上）

我尝试过以各种方式使用clear:both，height:auto，display:block，但似乎没有任何效果。

小提琴代码：

HTML：

<div class="frame_outer">
    <div class="frame_inner">
        <ul class="my-col">Important stuff</ul>
        <ul class="my-col">Important stuff
            <li class="inside-col">Cool stuff</li>
            <li class="inside-col">Cool stuff</li>
            <li class="inside-col">Cool stuff yay yay cool stuff</li>
            <li class="inside-col">Cool stuff</li>
            <li class="inside-col">Cool stuff</li>
            <li class="inside-col">Cool stuff</li>
            <li class="inside-col">Cool stuff</li>
        </ul>
        <ul class="my-col">Important stuff</ul>
    </div>
</div>

CSS：

.frame_outer {
    overflow: auto;
    position: relative;
    border: 1px solid black;
    max-width: 320px;
    max-height: 640px;
    /* I don't know how to make my stuff appear without manually setting height like below */
    /* height: 1000px; */
    /* What I want is for frame_outer to expand automatically either until it hits the height of frame_inner or its max-height*/
}
.frame_inner {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 150%;
}
.my-col {
    list-style-type: none;
    float: left;
    margin: 0;
    border: 1px solid white;
    background: #eeeeee;
    width: 20%;
}
.inside-col {
    background: #ebe7eb;
    padding: 4px;
    margin-top: 100px;
    border: solid #808080 1px;
    width: 90%;
    word-wrap: break-word;
    display: inline-block;
}

Answer 1

问题出现了，因为frame_inner有绝对的位置。

删除它并只给出width和float属性使它出现在frame_outer中。它也是水平的和垂直可滚动的。

这是我更新的课程，

＆＃13;

.frame_inner {
    float:left;
    width: 150%;
}

＆＃13;

检查更新后的JSFIDDLE

希望这能解决你的问题。

Answer 2

从position: absolute;移除.frame_inner为我工作

Answer 3

试试这个......

$(".frame_outer").css("height",$(".frame_inner").css("height"));

如何使溢出创建一个外部div：自动扩展到其内容的高度到一个点？

3 个答案: