如何将 div 背景与其内容的底部对齐答案

【问题标题】：How do I align a div background with the bottom of its contents如何将 div 背景与其内容的底部对齐
【发布时间】：2015-02-10 17:41:33
【问题描述】：

我想使用一个与我的内容形成鲜明对比的背景，但图像底部的 25% 左右除外。如何将 25% 的位置与内容的底部或距 div 底部的设定距离对齐？内容高度随页宽变化，背景有大小覆盖

HTML

<div class="firstPanel">content here</div>

CSS

.firstPanel {
    background-image: URL("path-to-background");
    background-position: 50% 70%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding: 20px;
    padding-bottom: 100px;
}

【问题讨论】：

选择器应该是.first.panel
看起来自动更正改变了它，已修复
当我在 CSS 中修复一个时，错过了 HTML 中的那个

标签： javascript jquery html css

【解决方案1】：

根据我对您问题的理解，您可以在 CSS 中添加：

margin-bottom:25%;

这指定了包含元素宽度百分比的边距。

【讨论】：

这让我更接近，但是当窗口变窄并且文本开始换行时它仍然重叠，我希望空间比窗口更宽时提供的空间小
尝试将其添加到 CSS 中：position:relative;z-index:1;
除了导致 div 绘制在另一个部分的顶部之外，这似乎没有多大作用。将边距更改为填充并使用带有媒体查询的margin-bottom: calc(250px - 25%) 以保持值

【解决方案2】：

在css文件中使用这个

*{
    margin: 0;
    padding: 0;
}

它从页面中清除所有不可避免的空间。

【讨论】：

我有 'body { margin: 0;填充：0； }'