固定区域内具有可变内容和控制按钮的窗体
下面列出的类似问题中没有处理的主要问题是表单对象，它有一个变量部分和一个非变量页脚(提交按钮)。
目的是展示：
- A header (一个带有徽标和第二个单元格中文本的表(宽度:100%))：大小应该是最小的，所有内容都显示为
- A表单(包含2部分)：
- 字段位于一个div中，它将扩展到剩余的所有空格，如果缺少空间将滚动。(最小大小:1条文本行)
- Submit/ Rest按钮在表中，应该始终是可见的，不应该调整大小。在最坏的情况下，浏览器窗口底部的棍子。(除非浏览器窗口变得非常小的course)
。)
- 不应该在浏览器窗口底部下方(除非用户调整到可笑的大小)。
- Hardcoded height is NOT an option (except the 100% for technical reasons - body or column parent for example). Header and footer height MUST be autocomputed by browser to use minimum space while displaying all content. If user reduce the width of the browser window increasing the header or footer text to wrap on more lines, the height must grow accordingly. Thus percentage or viewport heigh is not an option as it is arbitrary and can't take car of the user zoom, the browser width resize and such.
我尝试了以下布局：
<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>在仔细查看了类似的问题(见下面)之后，我找不到能够处理具有可变大小可滚动部分和固定页脚的表单对象的东西。
我还仔细地看了一下https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox，没有再成功了。
我尝试了类头、variable_scrollable_content和页脚的flex方法，但没有成功。我还试图将form对象放入flex类中，但这是行不通的。
由于我无法将表单submit/reset按钮与它们管理的字段分开，所以我不知道如何解决这个问题。
windows
- footer (包含窗体控制按钮)的标题应该粘在浏览器的顶部(包含窗体控制按钮)，如果浏览器窗口很大，enough.
- fields应该粘在浏览器窗口的底部，如果浏览器窗口很大，enough.
- fields应该位于可变大小的容器中，该容器使用页眉和页脚之间的所有剩余空间，并具有溢出-y:滚动；因此，如果不能显示其全部内容，则可以滚动。
如果上面的简化代码不够，可以在这里找到“真实的”代码：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。
类似问题
我检查了以下类似的问题，我相信我的问题是不同的，因为主要的问题是形式对象干扰了布局：
回答 2
Stack Overflow用户
发布于 2019-10-18 18:31:27
我刚找到解决办法。在这种情况下，问题是表单对象会干扰flex列子列，而不是在同一Dom级别树上。
简单的解决方案是移动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>
<!-- optionnal 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>但这还不够，因为将flex列的高度设置为100% (当body也被设置为100%时)是行不通的。也许表单对象没有传播高度？解决方案是用vh (视口高度)单元设置列的高度。
所以我把它设为100 to。不幸的是，由于某些边框大小和来自父对象及其本身的填充，出现了一些故障。因此，作为退步，我把它放在96 as，但这是丑陋的，我将调查，并将删除寄生虫边界的填充，使身体大于100 as。
<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>以上水坑高度大于100 in。有两种解决方案可以解决这个问题：
- 从父对象中删除任何边框填充或类似的内容。
- 将列设置为绝对位置(0,0)
。
Stack Overflow用户
发布于 2019-10-21 08:13:35
在包含控制按钮的固定页脚中，flex内容中的可滚动窗体的替代解决方案是将窗体控件按钮移到窗体之外。
然后，代码看起来如下：
<body style="height: 100%">
<div style="display: flex; flex-flow: column; height: 100%;">
<div id="header" style="flex: 0 0 auto;">foo bar</div>
<div id="content" style="flex: 1 1 auto; overflow-y: scroll;">
<form id="foobar">
Input fields
</form>
</div>
<div id="footer" style="flex: 0 0 auto;">
<button form="foobar" type="submit" formmethod="POST">Submit</button>
<button form="foobar" type="reset">Reset</button>
</div>
</div>
</body>其优点是，它的工作高度100%，因为它考虑到边缘边界和填充父(而vh是一个绝对的视口大小)。
https://stackoverflow.com/questions/58455816
复制相似问题
腾讯云开发者
