将元素放在div溢出部分的底部

Question

将元素放在div溢出部分的底部

4

我想把一个元素放在一个内部div的底部（距离底部5像素），这个内部div又在另一个div中，且设置了overflow属性。当内部div比父div大时，滚动条出现。

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

当div没有超过外部div时，它能正常工作。但是当它有overflow时，按钮不会停留在它的底部，而是距离外部div底部5像素的位置，并且当我滚动溢出的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像素，并且当文本很短时也距外部div底部5像素？同时，我正在寻找一种解决方案，不需要明确设置按钮上方div部分的高度约为70％，因为我的按钮可能具有可变高度（从20像素到200像素）。非常感谢。
https://dl.dropboxusercontent.com/u/10039660/whatiwant.png

- zavr

一些代码可以帮助别人理解你的问题。 - Yagnesh Agola

我已经添加了代码，谢谢。 - zavr

4个回答

1

在父级元素中，相对于 .btn 给出位置并放置按钮。

          <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>

- Atif Azad

1

我希望它成为内部div的一部分，因此它会随着滚动并位于其底部。同时，如果文本不会溢出，我希望它位于主div的底部，就像第二个短文本div中一样。 - zavr

这是您的解决方案。.btn { 显示：块; 边距：-100px 0 0; 位置：固定; 层级：999; } - Atif Azad

0

给你的段落元素设置最小高度。

<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> 中。从按钮元素中删除类，并将 CSS 类赋予新的 div。新 div 的 CSS。

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

- Yagnesh Agola

不错，它可以工作！谢谢！我没有想到，看起来是一个很简单的解决方案 :) - zavr

虽然这并不是抽象的问题，但如果我有一个高度比其他按钮高30%的按钮会怎样？如果它们的高度是可变的，从20像素到150像素呢？ - zavr

实际上它不起作用，因为如果我在<p>之前有<h1>怎么办，而我确实有。 - zavr

0

不确定是否完全符合您的要求，但如果您根本不定位按钮，则它会保持在内部 div 的底部。

- artificialflow3r

是的，但即使文本很短，我也希望它位于底部。 - zavr

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Surjith S M · Accepted Answer

在innerDiv中添加min-height将解决您的问题。

这里有一个可工作的演示

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

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

编辑：最新的Fiddle