Как сделать так, чтобы один div всегда был в нижней части представления, а верхний div изменял размеры на основе нижнего div?

Question

Я довольно новичок в веб-разработке, и я работаю над тем, что требует двух div, чтобы всегда занимать 100% области просмотра.

У меня есть div A, который представляет собой интерактивное изображение, которое должно бытьнастолько большой, насколько это возможно, и должен занимать верхнюю часть экрана.

Затем div B, который содержит 1 или 2 кнопки, в зависимости от того, какое действие выполняется над интерактивным div A. Div B находится в нижней частипредставление.

Есть ли чистый способ сделать размер A зависимым от размера, который div B принимает динамически?Как и «остаток» окна просмотра должен быть div A. Я поместил изображение ниже того, чего я пытаюсь достичь.Второе изображение показывает, что произойдет, если какое-то действие будет выполнено в div A - для простоты мы могли бы сказать, что если вызывается какой-то метод potato (), мы хотим, чтобы div B теперь содержал две кнопки.

Я пытался сделать решение с:

        position: fixed;
        bottom: 0;

, и Div B выглядит таким образом на 90% правильно, но это не меняет размер Div A, и я также не хочу Div B«покрывая» что-либо таким образом.Я просто хочу, чтобы он был того же уровня, что и Div A, и разделял пространство, чтобы получить 100% области просмотра.

Любая помощь будет принята с благодарностью!Я бы предпочел использовать простой CSS, если это возможно.Я выполняю командную работу и не могу добавить в проект много библиотек или новых зависимостей.

Answer 1

проверка на этой скрипке https://jsfiddle.net/kt931frp/1/ трюк использует flex, как предложено в ответе ниже.

<div class="wrapper">
<div class="part1"></div>
<div class="part2">
<div contenteditable="true"class="contenteditable">continue typing...</div>
</div>
</div>

body {
  margin: 0;
}

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.part1 {
  background:#ffff00;
  flex: 1 0 auto;
}

.part2 {
  padding: 2em;
  color: white;
  background:#ff0000;
}
.contenteditable{
  width:100%;
  min-height:50px;
}

Answer 2

Принимая мои 2 цента, вы также можете воспользоваться display: table|table-row|table-cell для создания этого макета (см. Документацию MDN в свойстве display, чтобы узнать больше).

Трюк при использованииэти свойства, если только display: flex, не позволяют ячейке "actions" измерить 0,1px, что заставит ячейку быть минимально возможным.Тем не менее, он не разрушает свой внутренний контент, что позволяет динамически регулировать в зависимости от содержимого внутри.

Поскольку ячейки по умолчанию являются общими пространствами, это делает работу для такого типа макета, потому что "Div A" использует оставшуюся часть доступного пространства.

Проверьте это JSFiddle или используйте приведенный ниже фрагмент кода, чтобы поиграть с ним.Я обозначил свойства, которые вы можете настроить.

body {
  margin: 0px;
}

.app {
  width: 100vw;
  height: 100vh;
  display: table;
}

.main,
.actions {
  display: table-row;
}

.main > div,
.actions > div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  border-width: 10px; /* tweak this */
  border-style: solid; /* tweak this */
}

.main > div {
  border-color: purple; /* tweak this */
  background-color: violet; /* tweak this */
}

.actions > div {
  padding: 20px; /* tweak this */
  border-color: blue; /* tweak this */
  background-color: lightblue; /* tweak this */
  height: 0.1px;
}

.button {
  width: 200px; /* tweak this */
  padding: 10px; /* tweak this */
}

<div class="app">
  <main class="main">
    <div>
      Div A
    </div>
  </main>
  <footer class="actions">
    <div>
      <div>
        Div B - some text and 2 buttons
      </div>
      <div>
        <button class="button">
          Button 1
        </button>
      </div>
      <div>
        <button class="button">
          Button 2
        </button>
      </div>
    </div>
  </footer>
</div>

Надеюсь, это поможет вам получить вдохновение.

Answer 3

На самом деле, это довольно просто, используя Flexbox и свойство flex .
Вы можете изменить значение padding, чтобы увидеть реакцию верхнего блока.

body {
  margin: 0;
}

main {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.top-part {
  flex: 1 0 auto; /* This tells `top-part` to take the remaining place. */
  background: violet;
}

.bottom-part {
  padding: 2em;
  color: white;
  background: lightblue;
}

<main>
  <section class="top-part"></section>
  <section class="bottom-part">
    Some text here
  </section>
</main>