Question

我正在尝试在div的底部（5px）放置一个元素，该元素位于另一个div内部并且溢出设置为auto。因此，当它比父div大时，会出现滚动条。

我还需要在内部div的底部放置一个按钮，使其保持在底部，因此我将position:relative设置为div，将position:absolute设置为按钮。

当div不大于外部div时，它工作正常，但是当它有溢出时，按钮不会停留在它的底部，而是从外部div的底部有5px的位置，并且当我滚动溢出的div时，它会滚动它。这里更容易看到：
Fiddle link

    <div class="mainDiv">
        <div class="innerDiv">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <button class="btn">Edit</button>
        </div>
    </div>
    <br>
    <div class="mainDiv">
        <div class="innerDiv">
            <p>Short text.</p>
            <button class="btn">Edit</button>
        </div>
    </div>
    .mainDiv {
        border: 1px solid green;
        width: 200px;
        height: 200px;
    }
    .innerDiv {
        border: 1px solid red;
        background: lightcoral;
        max-height: 200px;
        height:100%;
        overflow: auto;
        position:relative;
    }
    .btn {
        position:absolute;
        bottom: 5px;
    }
}

如何解决这个问题，以便当文本很短时，按钮总是距离内部div底部5 px，同时距离外部div底部5 px？ https://dl.dropboxusercontent.com/u/10039660/whatiwant.png 此外，我正在寻找一种解决方案，它不会明确地将按钮上方div的高度设置为70％，因为我的按钮可能具有可变高度（从20px到200px）。非常感谢。

Answer 1

将最小高度添加到innerDiv将解决您的问题。

这是一个有效的Demo

.innerDiv {
    border: 1px solid red;
    background: lightcoral;
    max-height: 200px;
    height:100%;
    overflow: auto;
    min-height:100%;

}
.btn {
   position:absolute;
    bottom:10px;
}

修改：最新Fiddle

Answer 2

给出相对于.button的位置，并将按钮放在父潜水中

          <style type="text/css">
.mainDiv {
    border: 1px solid green;
    width: 200px;
    height: 200px;
}
.innerDiv {
    border: 1px solid red;
    background: lightcoral;
    max-height: 200px;
    height:100%;
    overflow: auto;
    position:relative;
}
.btn {
    position:relative;
    bottom: 30px;
}</style>
<div class="mainDiv">
    <div class="innerDiv">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    </div>
     <button class="btn">Edit</button>
</div>
<br>
<div class="mainDiv">
    <div class="innerDiv">
        <p>Short text.</p>
        <button class="btn">Edit</button>
    </div>
</div>

Answer 3

不确定，如果这正是您正在寻找的，但如果您根本没有放置按钮，它会保留在内部div的底部。

Answer 4

为段落元素指定min-height。

<p style="min-height: 70%;">Your Text...</p>

并将按钮位置从absolute更改为relative。

.btn {
    position:relative;
    bottom: 5px;
}

这可以帮助您根据自己的要求修复按钮位置。

另一种解决方案

在<div>内添加按钮，如下所示：

    <div class="btndiv">
        <button>Edit</button>
    </div>

将此div放在<div class="innerDiv">..</div>内从button元素中删除class并将css类赋予新div 新div的CSS

.btndiv{
    position:relative;
    bottom: 5px;
}

将元素放在div溢出的底部

4 个答案: