CSS div внизу не отображается, если применяется поле

Question

Я пытаюсь добиться следующего:

I was able to replicate the image but only if my div is not floating in the page (without the margin applied and without the position: absolute), otherwise I can't see the green rectangle.

My HTML structure is the following:

 Самый популярный контент  Среднее содержание  Нижнее содержимое      

В .interface CSS У меня следующее:

.interface
{
  position: absolute;
  top: 15%;
}

С этим CSS Я не вижу зеленый прямоугольник. Если я удалю position: absolute (и, следовательно, top: 15% перестанет применяться), я смогу увидеть зеленый прямоугольник.

Вы можете увидеть проблему в этом JSFiddle : https://jsfiddle.net/v9euwdz3/

Итак, как мне сделать так, чтобы DIV отображался на определенном уровне (поле сверху) и без ущерба для моей структуры HTML?

Answer 1

, как мы знаем, контент с высотой 100% означает 100% его родителя, и, хотя высота родителя не определена, вызовет ошибку, с которой вы застряли, вы установите с помощью * От 1003 * до 100%, но вы ошиблись, вы бы установили его на 100vh, чтобы он соответствовал экрану, если вы находитесь за компьютером, и другие ошибки, которые я обнаружил, были в ваших вычислениях, где вы использовали для вычитания измерения, которое находится в долях от один в пикселях height: calc(100% - 150px);, а остальные - с простыми ошибками

html,
body {
  height: 100vh;
}

.app {
  position: relative;
  height: 100%;
  display: flex;
}

.interface {
  position: absolute;
  height: 100%;
  top: 15%;
}

.view {
  position: fixed;
  height: 100%;
  background-color: #ccc;
  width: 350px;
}

.body {
  position: relative;
  height: 100%;
}

.body .top {
  height: 15%;
  border: 1px solid #000;
}

.body .middle {
  height: 60%;
  border: 1px solid red;
}

.body .bottom {
  height: 20%;
  border: 1px solid green;
}

<div class="app">
  <div class="interface">
    <div class="view">
      <div class="body">
        <div class="top">
          Top content
        </div>
        <div class="middle">
          Middle content
        </div>
        <div class="bottom">
          Bottom content
        </div>
      </div>
    </div>
  </div>
</div>

, чтобы увидеть результат во фрагменте, вы должны наблюдать его на всей странице, а также когда вы видите результат через jsfiddle там, в разделе результатов есть полоса вниз которые скрывают некоторую часть footer

Answer 2

Вот чего вы пытаетесь достичь с помощью flex:

.body {
  display: flex;
  flex-direction: column;
  background-color: blue;
  justify-content: space-between;
  height: 100vh;
}

.navetc {
  background-color: white;
  height: 15vh;
}

.top {
  background-color: green;
  height: 60px;
}

.middle {
  background-color: yellow;
  flex-grow: 1;
}

.bottom {
  background-color: red;
  height: 50px;
}

<div class="app">
  <div class="interface">
    <div class="view">
      <div class="body">
        <div class="navetc">
          SPACE
        </div>
        <div class="top">
          Top content
        </div>
        <div class="middle">
          Middle content
        </div>
        <div class="bottom">
          Bottom content
        </div>
      </div>
    </div>
  </div>
</div>

Вы также можете использовать margin-top: 15%; вместо заполнителя div

.body {
  display: flex;
  flex-direction: column;
  background-color: blue;
  justify-content: space-between;
  height: 100vh;
}

.top {
  margin-top: 15vh;
  background-color: green;
  height: 60px;
}

.middle {
  background-color: yellow;
  flex-grow: 1;
}

.bottom {
  background-color: red;
  height: 50px;
}

<div class="app">
  <div class="interface">
    <div class="view">
      <div class="body">
        <div class="top">
          Top content
        </div>
        <div class="middle">
          Middle content
        </div>
        <div class="bottom">
          Bottom content
        </div>
      </div>
    </div>
  </div>
</div>

(я использовал vh вместо%, чтобы он правильно отображался в этом фрагменте кода)