html - 表单底部的 CSS 页脚，而不是正文/页面

Question

我在处理同一页面上的多个表单时遇到问题，我试图让 footer 元素位于 部分的底部以下 HTML 的 元素:

<h2>Header</h2>
<section>
<img alt="" class="left margin" src="placeholder.png" />
<form action="/" method="post">
<fieldset>
<footer class="center"><input type="submit" /></footer>
</fieldset>
</form>
</section>

图像高度大于表单的继承高度。我已经尝试过 position 但没有成功，看起来 Flexbox 可能 是可行的方法，尽管我无法在我自己的。此外，我需要 footer 使其 background-color 在 `section.

的可用 width 的 100% 范围内可见。

由于在同一页面上有多个表单，具有这种精确的 HTML 设置(在 form 和 fieldset 中使用 footer 元素)我不是试图在页面底部获取页脚，就像 Stack 上的一万个其他问题一样，只是在 >section 元素本身。

没有 JavaScript，我需要这是一个纯 CSS 解决方案。

这是 fiddle :https://jsfiddle.net/11es8k8e/

CSS

* {border: 0; padding: 0; margin: 0;}
footer {background-color: #eee;}
form fieldset input {background-color: #ffc;}
img {heght: 100px; width: 100px;}
section {border: #ccc solid 1px; margin: 32px; overflow: auto;}
.left {float: left;}
.center {float: center; text-align: center;}
.right {float: right;}

Answer 1

我认为你可以使用这段 CSS:

img {
    position: relative;
    z-index: 1;
}

section{
    position: relative;
}

footer{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: red;
}

fiddle :https://jsfiddle.net/lmgonzalves/11es8k8e/4/