Question

我在同一页面上多个表单时遇到问题我试图让section元素位于<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>元素的底部以下HTML：

height

图片height大于表单的继承position。我试过Flexbox没有运气，似乎footer 可能成为可行的方式，虽然我无法自己解决这个问题。另外，我需要background-color在`部分的100％可用width中看到它footer。

由于在同一页面上有多个表单，并且使用了这个确切的HTML设置（form和fieldset元素中的footer）我是不尝试获取页面底部的section，就像Stack上的其他一万个问题一样，只在* {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;}元素本身内。

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

这是小提琴：https://jsfiddle.net/11es8k8e/

CSS

(++i % 2)

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/

Answer 2

我认为这会对你有帮助......

* {border: 0; padding: 0; margin: 0;}
footer {background-color: #eee;}
form fieldset input[type="submit"] {background-color: #ffc; display:block; position:absolute; bottom:0px; width: calc(100% - 100px);}
img {height: 100px; width: 100px;}
section {border: #ccc solid 1px; margin: 32px; overflow: auto; position:relative;}
.left {float: left;}
.center {float: center; text-align: center;}
.right {float: right;}

您需要为章节中的元素设置位置...

Answer 3

使用flexbox就像

section, form {
  display: flex;
}
form > :first-child {
  display: flex;
  flex-direction: column;
}
form, form :first-child {
  flex-grow: 1;
}

然而，display: flex does not work on fieldsets。您可以使用其他元素，例如div。

* {
  border: 0;
  padding: 0;
  margin: 0;
}
footer {
  background-color: #eee;
  text-align: center;
}
form input {
  background-color: #ffc;
}
img {
  height: 100px;
  width: 100px;
}
section {
  border: #ccc solid 1px;
  margin: 32px;
  overflow: auto;
}
section, form {
  display: flex;
}
form >:first-child {
  display: flex;
  flex-direction: column;
}
form, form :first-child {
  flex-grow: 1;
}

<section>
  <img alt="placeholder avatar" src="http://i.stack.imgur.com/5m07n.gif" />
  <form action="" method="get">
    <div>
      <div>
        <label for="test1">Test 1</label>
        <input id="test1" />
      </div>
      <footer>
        <input type="submit" value="Submit Form" />
      </footer>
    </div>
  </form>
</section>
<section>
  <img alt="placeholder avatar" src="http://i.stack.imgur.com/5m07n.gif" />
  <form action="" method="get">
    <div>
      <div>
        <label for="test2">Test 2</label>
        <input id="test2" />
      </div>
      <footer>
        <input type="submit" value="Submit Form" />
      </footer>
    </div>
  </form>
</section>
<section>
  <img alt="placeholder avatar" src="http://i.stack.imgur.com/5m07n.gif" />
  <form action="" method="get">
    <div>
      <div>
        <label for="test3">Test 3</label>
        <input id="test3" />
      </div>
      <footer>
        <input type="submit" value="Submit Form" />
      </footer>
    </div>
  </form>
</section>

FORM底部的CSS页脚，而不是正文/页面

3 个答案: