Форма с переменным содержимым и кнопкой управления в фиксированной области

Question

Основная проблема, которая не рассматривается в аналогичных вопросах, перечисленных ниже, - это объект FORM, имеющий переменную часть и нижний колонтитул без переменных (кнопки отправки)

Цель состоит в том, чтобы отобразить:

• Заголовок (таблица (ширина: 100%) с логотипом и текстом во второй ячейке): размер должен быть наименьшим из возможных при отображении всего контента
• ФОРМА (содержащая 2 части):
  • Поля находятся в элементе div, который будет расширяться на все оставшееся пространство и будет прокручиваться, если ему не хватает места. (минимальный размер: 1 строка текста)
  • Кнопки Submit / Rest находятся в таблице и должны ВСЕГДА быть видимыми и не изменяться в любом случае. В худшем случае прилипание к нижней части окна браузера (за исключением случаев, когда окно браузера становится смехотворно маленьким, конечно)

• Ничто не должно быть ниже нижней части окна браузера (кроме случаев, когда пользователь изменяет размер досмешной размер).

  • Жестко закодированная высота НЕ является опцией (за исключением 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, но безуспешно.

Я попробовал гибкий подход для классов header, variable_scrollable_content и footer, но безуспешно. Я также пытался поместить объект формы в класс flex, но это не работает.

Поскольку я не могу отделить кнопки отправки / сброса FORM от полей, которыми они управляют, я не знаю, как решитьверхний колонтитул this.

• должен придерживаться верхней части окон браузера * нижний колонтитул 1039 *
• (содержащий кнопки управления формой) должен в худшем случае придерживаться нижней части окна браузера или придерживаться в конце последних полейесли окна браузера достаточно велики.
• поля должны быть в контейнере переменного размера, который использует все оставшееся пространство между верхним и нижним колонтитулами и имеет overflow-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

Подобные вопросы

Я проверил следующие подобные вопросы, и я считаю, что мой вопрос отличается, так как основная проблема заключается в том, что объект FORM мешает макету:

• прокрутка содержимого между фиксированным верхним и нижним колонтитулами с переменной высотой
• Увеличение высоты содержимого между фиксированным верхним и нижним колонтитулами
• Сделать div заполнить высоту оставшегося пространства экрана

Оригинальный вопрос был здесь: переменная высота div между верхним и нижним колонтитулами

Answer 1

Альтернативное решение прокручиваемой ФОРМЫ в флекс-контенте с фиксированным нижним колонтитулом, содержащим кнопки управления, заключается в перемещении кнопок управления ФОРМ за пределы формы.

Код выглядит следующим образом:

<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 - абсолютный размер области просмотра.

Answer 2

Я только что нашел решение. В этой ситуации проблема заключалась в том, что объект FORM мешал бы дочерним элементам столбца 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>

Но этого было недостаточно, поскольку установка высоты столбца гибкого трубопровода на 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)