在固定区域中具有可变内容和控制按钮的表单

Posted 2021-05-05

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在固定区域中具有可变内容和控制按钮的表单相关的知识，希望对你有一定的参考价值。

上述错误重复项中未解决的主要问题是具有可变部分和页脚（提交按钮）的FORM对象

目的是显示：

标题（表格（宽度：100％），带有徽标和第二个单元格中的文本）：尺寸应尽可能小，并显示所有内容
一张表格（包含2个部分）：
- 字段位于div中，该字段将扩展到所有剩余空间，并且如果缺少空间将滚动。（最小尺寸：1个文本行）
- 提交/休息按钮位于表格中，应该始终可见并且无论如何都不能调整大小。最糟糕的是，固守浏览器窗口的底部。（当然，除非浏览器窗口变小得可笑）
任何内容都不应低于浏览器窗口的底部（除非用户将大小调整为可笑的大小）。
- 不可使用硬编码的高度（出于技术原因100％除外-例如正文或列父级）。浏览器必须自动计算页眉和页脚的高度，以在显示所有内容时使用最小空间。如果用户减小浏览器窗口的宽度，增加页眉或页脚文本以换行，则高度必须相应增加。因此，百分比或视口高度不是一个选择，因为它是任意的，并且不能影响用户缩放，浏览器宽度调整大小等。

我尝试过以下布局：

<div id="column">
<div id="header>
  <table><tbody>
    <tr><td>LOGO</td><td>Some intro text on a few lines</td></tr>
  </tbody></table>
  <!-- optionnel error line (arbitrary length) if previous form submission failed -->
</div>

<form>
  <div id="variable_scrollable_content">
  <!-- multiple field sets hosting some input (text, select, ...) -->
  </div>

  <div id="footer">
  <table><tbody>
    <tr><td>Save button</td><td>Reset button</td></tr>
  </tbody></table>
  <!-- A few lines of text -->
  </div>
</form>
</div>

[我仔细考虑了类似的问题后（见下文），我找不到能够处理具有可变大小的可滚动部分和固定页脚的FORM对象的东西。

我也仔细观察了https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox，但没有成功。

我尝试对类标题，variable_scrollable_content和页脚使用flex方法，但没有成功。我也尝试将表单对象放在flex类中，但这不起作用。

由于我无法将FORM提交/重置按钮与它们管理的字段分开（html标准不允许，并且受随机行为的影响，所以我不知道如何解决此问题。

标题应停留在浏览器窗口的顶部
页脚（包含表单控制按钮）在最坏的情况下应停留在浏览器窗口的底部，或者如果浏览器窗口足够大，则应停留在最后一个字段的末尾。
字段应该在可变大小的容器中，该容器使用页眉和页脚之间的所有剩余空间，并具有溢流y：scroll;因此，如果无法显示其全部内容，它可以滚动。

如果上面的简化代码不够用，可以在这里找到“真实”代码：https://github.com/finley/SystemImager/blob/initrd-from-imageserver-and-dont-package-initrd/webgui/edit_config.php完整的CSS在这里：https://github.com/finley/SystemImager/blob/initrd-from-imageserver-and-dont-package-initrd/webgui/css/screen.css

类似问题

我已经检查了以下类似的问题，并且我认为我的问题有所不同：

这不是scrolling content between fixed header & footer with variable height的重复项>>
这不是Content height expand between fixed header and fixed footer的重复项>>
这不是Make a div fill the height of the remaining screen space的重复项>

原始问题在这里：variable height div between header and footer

上面的错误重复项中未处理的主要问题是具有可变部分和页脚（提交按钮）的FORM对象，目的是显示：标头（带有徽标的表（宽度：100％））。 ..

我刚刚找到了解决方案。在这种情况下，问题是FORM对象将干扰不在同一Dom级别树上的flex列子代。]

简单的解决方案是将FORM对象移到最上面，因此它包括flex列及其全部内容。

上面的代码变为：

<form>
<div id="column">

  <div id="header>
    <table><tbody>
      <tr><td>LOGO</td><td>Some intro text on a few lines</td></tr>
    </tbody></table>
    <!-- optionnel error line (arbitrary length) if previous form submission failed -->
  </div>

  <div id="variable_scrollable_content">
  <!-- multiple field sets hosting some input (text, select, ...) -->
  </div>

  <div id="footer">
  <table><tbody>
    <tr><td>Save button</td><td>Reset button</td></tr>
  </tbody></table>
  <!-- A few lines of text -->
  </div>
</div>
</form>
但是，这还不够，因为将柔性列高度设置为100％（当主体也设置为100％时）将不起作用。也许表单对象不会传播高度？解决方案是使用vh（视口高度）单位设置列的高度。
所以我将其设置为100vh。不幸的是，由于某些边框大小以及父对象及其自身的填充，存在一些故障。因此，作为备用广告，我将其设置为96vh，但这很丑陋，我将进行调查，并将删除使身体大于100vh的寄生虫边框大小填充。
<body style="height: 100%">
  <form>
  <div style="display: flex; flex-flow: column; height: 100vh;">
    <div id="header" style="flex: 0 0 auto;">foo bar</div>
    <div id="content" style="flex: 1 1 auto; overflow-y: scroll;">Input fields</div>
    <div id="footer" style="flex: 0 0 auto;">Control buttons</div>
  </div>
  </form>
</body>
以上水槽的高度大于100vh。解决此问题的最佳方法是什么？

要删除父对象的边框填充等吗？
将列设置为绝对位置（0,0）吗？
最干净的方法是什么？

答案

我刚刚找到了解决方案。在这种情况下，问题是FORM对象将干扰不在同一Dom级别树上的flex列子代。]

以上是关于在固定区域中具有可变内容和控制按钮的表单的主要内容，如果未能解决你的问题，请参考以下文章

带有固定按钮的片段

Java Swing：具有固定宽度和可变高度的垂直布局

具有可变 contentSize 的 UIScrollView

Android导航组件“向上按钮”打开抽屉导航

在引导程序中具有可变高度的粘性页脚

HTML 表格 - 固定和多变量列宽