内容固定且控制按钮固定的表格 [英] Form with variable content and control button in fixed area

问题描述

下面列出的类似问题中未解决的主要问题是具有可变部分和不可变页脚(提交按钮)的FORM对象

The main issue that is not treated in similar questions listed below is a FORM object that has a variable part and a non variable footer (submit buttons)

目标是显示:

• 标题(在第二个单元格中带有徽标和文本的表格(宽度:100％)的表):尺寸应尽可能小，并显示所有内容
• 一张表格(包含2个部分):
  • 字段位于div中，该字段将扩展到所有剩余空间，并且如果缺少空间将滚动. (最小尺寸:1个文本行)
  • 提交/休息"按钮在表格中，应该始终可见并且无论如何都不能调整大小.在最坏的情况下，会停留在浏览器窗口的底部.(当然，除非浏览器窗口变小得可笑)
  • A header (a table (width:100%) with a logo and a text in second cell): size should be the smallest possible with all content displayed
  • A FORM (containing 2 parts):
    • Fields are in a div that will expand to all space remaining and will scroll if it lack space. (minimum size: 1 text line)
    • Submit / Rest buttons are in a table and should ALWAYS be visible and not resized in anyway. At worst the stick to bottom of browser window.(except if browser window becomes ridiculously small of course)

    任何内容都不应位于浏览器窗口底部下方(除非用户将大小调整为可笑的大小).

    Nothing should go below bottom of browser window (except if user resize to a ridiculous size).

    • 硬编码的高度不是一个选项(出于技术原因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对象的东西，该对象具有可变大小的可滚动部分和固定的页脚.

    After I gave a careful view to similar questions (see below), I was unable to find something that could handle the FORM object that has a variable size scrollable part and a fixed footer.

    我还仔细查看了 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox ，但没有成功.

    I also gave a careful look at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox with no more success.

    我尝试对类标题，variable_scrollable_content和页脚使用flex方法，但没有成功.我还尝试将表单对象放在flex类中，但这是行不通的.

    I tried the flex approach for classes header, variable_scrollable_content and footer with no success. I also tried to put the form object in flex class but that doesn't work.

    由于我无法将FORM提交/重置按钮与它们管理的字段分开，所以我不知道如何解决此问题.

    As I can't separate the FORM submit/reset buttons from the fields they manage, I don't know how to solve this.

    • 标题应停留在浏览器窗口的顶部
    • 页脚(包含表单控件按钮)应该在最坏的情况下停留在浏览器窗口的底部，或者如果浏览器窗口足够大，则应停留在最后一个字段的末尾.
    • 字段应该放在可变大小的容器中，该容器使用页眉和页脚之间的所有剩余空间，并且具有溢流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

    In case the above simplified code is not sufficient, the "real" code can be found here: https://github.com/finley/SystemImager/blob/initrd-from-imageserver-and-dont-package-initrd/webgui/edit_config.php The full css is here: https://github.com/finley/SystemImager/blob/initrd-from-imageserver-and-dont-package-initrd/webgui/css/screen.css

    我已经检查了以下类似问题，并且我认为我的问题有所不同，因为主要问题是FORM对象干扰了布局:

    I have checked the following similar questions, and I believe my question is different as the main problem is the FORM object interfering with the layout:

    • 在固定标头&之间滚动内容高度可变的页脚
    • 内容高度在固定页眉和固定页脚之间扩展
    • 将div填充到剩余的屏幕空间
    • 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

    原始问题在这里:可变高度div之间页眉和页脚

    推荐答案

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

    I've just found the solution. In this situation, the problem was the FORM object that would interfere with flex column children not at the same Dom level tree.

    简单的解决方案是移动FORM对象，使其包含flex列及其全部内容.

    The simple solution was to move the FORM object so it includes the flex column it its whole content.

    上面的代码变为:

    <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％(当主体也设置为100％时)将不起作用.也许表单对象不会传播高度? 解决方法是使用vh(视口高度)单位设置列的高度.

    But this was not sufficient because setting flex column height to 100% (when body is also set to 100%) won't work. maybe the form object doesn't propagate the height? The solution was to set height of column with vh (viewport height) unit.

    所以我将其设置为100vh.不幸的是，由于某些边框大小以及父对象及其自身的填充，存在一些故障.因此，作为备用广告，我将其设置为96vh，但这很丑陋，我将进行调查，并将删除使机体大于100vh的寄生虫边框尺寸填充.

    So I set it to 100vh. Unfortunately, there are some glitches due to some border size and padding from parent objects and itself. So as a fallback I put it to 96vh, but this is ugly and I'll investigate and will remove the parasite border size padding that makes the body bigger than 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. 有两种解决方案可以解决此问题:

    The above sump is bigger than 100vh in height. There are 2 solution to fix that:

    • 从父对象中删除任何边框填充等.
    • 将列设置为绝对位置(0,0)

    这篇关于内容固定且控制按钮固定的表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！